/* ======================================== GLOBAL - PREVENT HORIZONTAL SCROLL ======================================== */ /* ════════════════════════════════════════════════════════════════════════════ TIPOGRAFIA — identica a do ERP Segla (dotNet Core/Segla.Web/wwwroot/app.css) ---------------------------------------------------------------------------- O ERP declara as variantes do Open Sans como FAMILIAS separadas ('Open Sans Light', 'Open Sans SemiBold', ...), todas com font-weight: normal — a troca de peso e feita trocando a familia, nao o weight. Arquivos .woff copiados de la, servidos localmente (sem depender do Google Fonts). Aplicada com o seletor * para alcancar tambem os componentes Syncfusion, exatamente como no ERP. ════════════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Open Sans Regular'; font-style: normal; font-weight: normal; src: local('Open Sans Regular'), url('fonts/OpenSans-Regular.woff') format('woff'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: normal; src: local('Open Sans'), url('fonts/OpenSans-Regular.woff') format('woff'); } @font-face { font-family: 'Open Sans Italic'; font-style: normal; font-weight: normal; src: local('Open Sans Italic'), url('fonts/OpenSans-Italic.woff') format('woff'); } @font-face { font-family: 'Open Sans Light'; font-style: normal; font-weight: normal; src: local('Open Sans Light'), url('fonts/OpenSans-Light.woff') format('woff'); } @font-face { font-family: 'Open Sans Light Italic'; font-style: normal; font-weight: normal; src: local('Open Sans Light Italic'), url('fonts/OpenSans-LightItalic.woff') format('woff'); } @font-face { font-family: 'Open Sans SemiBold'; font-style: normal; font-weight: normal; src: local('Open Sans SemiBold'), url('fonts/OpenSans-SemiBold.woff') format('woff'); } @font-face { font-family: 'Open Sans SemiBold Italic'; font-style: normal; font-weight: normal; src: local('Open Sans SemiBold Italic'), url('fonts/OpenSans-SemiBoldItalic.woff') format('woff'); } @font-face { font-family: 'Open Sans Bold'; font-style: normal; font-weight: normal; src: local('Open Sans Bold'), url('fonts/OpenSans-Bold.woff') format('woff'); } @font-face { font-family: 'Open Sans Bold Italic'; font-style: normal; font-weight: normal; src: local('Open Sans Bold Italic'), url('fonts/OpenSans-BoldItalic.woff') format('woff'); } @font-face { font-family: 'Open Sans ExtraBold'; font-style: normal; font-weight: normal; src: local('Open Sans ExtraBold'), url('fonts/OpenSans-ExtraBold.woff') format('woff'); } @font-face { font-family: 'Open Sans ExtraBold Italic'; font-style: normal; font-weight: normal; src: local('Open Sans ExtraBold Italic'), url('fonts/OpenSans-ExtraBoldItalic.woff') format('woff'); } @font-face { font-family: 'Open Sans Light Regular'; font-style: normal; font-weight: normal; src: local('Open Sans Light Regular'), url('fonts/OpenSans-Light-webfont.woff') format('woff'); } @font-face { font-family: 'Open Sans Condensed Bold'; font-style: normal; font-weight: normal; src: local('Open Sans Condensed Bold'), url('fonts/OpenSans-CondBold.woff') format('woff'); } *, html, body { font-family: "Open Sans"; } /* Mesma regra do ERP: a familia vale para todo elemento, inclusive Syncfusion. Sem font-size base — herda os 16px do navegador, como no ERP. */ *, html, body { font-family: "Open Sans"; } html, body { overflow-x: hidden !important; max-width: 100vw !important; } /* ======================================== THEME VARIABLES — padrão visual do ERP Segla ---------------------------------------- Valores espelham o Fluent 2 do Syncfusion (mesmo tema do ERP). O tema claro e o padrao; o escuro entra pela classe .dark no , junto com a troca do fluent2.css -> fluent2-dark.css (ver App.razor). Os NOMES das variaveis sao os mesmos de antes de proposito: todas as regras deste arquivo continuam valendo, so mudam os valores. ======================================== */ :root { /* Fonte do app: a mesma do ERP Segla */ --font-app: "Open Sans"; --bg-body: #ffffff; --bg-surface: #ffffff; --bg-hover: #f5f5f5; --bg-input: #ffffff; --border: #e5e7eb; --border-strong: #d1d1d1; --text: #242424; --text-muted: #616161; --text-body: #424242; --accent: #0f6cbd; /* azul Fluent do ERP (era verde-limao) */ --accent-hover: #115ea3; --accent-rgb: 15, 108, 189; /* usado nos rgba() com transparencia */ --accent-text: #ffffff; --accent-soft: #eff6fc; --shadow: rgba(0, 0, 0, 0.08); --shadow-strong: rgba(0, 0, 0, 0.14); --chart-bg: #ffffff; --scrollbar-track: #f5f5f5; --scrollbar-thumb: #d1d1d1; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --bg-primary: #ffffff; --bg-secondary: #fafafa; --bg-card: #ffffff; --text-primary: #242424; --text-secondary: #616161; --text-heading: #242424; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.12); } /* Escuro: neutros do Fluent 2 dark. O texto usa #adadad em vez de branco puro, mesma decisao do ERP (o branco do Fluent da contraste agressivo). */ html.dark { --bg-body: #141414; --bg-surface: #1f1f1f; --bg-hover: #292929; --bg-input: #1a1a1a; --border: #2e2e2e; --border-strong: #3d3d3d; --text: #adadad; --text-muted: #8a8a8a; --text-body: #adadad; --accent: #479ef5; --accent-hover: #62abf5; --accent-rgb: 71, 158, 245; --accent-text: #0a1a26; --accent-soft: #0f2a3f; --shadow: rgba(0, 0, 0, 0.4); --shadow-strong: rgba(0, 0, 0, 0.6); --chart-bg: #1f1f1f; --scrollbar-track: #141414; --scrollbar-thumb: #3d3d3d; --bg-primary: #141414; --bg-secondary: #1a1a1a; --bg-card: #1f1f1f; --text-primary: #e5e5e5; --text-secondary: #8a8a8a; --text-heading: #d4d4d4; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5); } html, body { font-family: var(--font-app); background: var(--bg-body); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a, .btn-link { color: var(--accent); } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem var(--bg-body), 0 0 0 0.25rem rgba(var(--accent-rgb), 0.4); } .content { padding-top: 1.1rem; } /* ======================================== GLOBAL BUTTONS - STANDARD PATTERN ======================================== */ /* Flat como no ERP: a cor fica na borda e no texto, nunca no preenchimento. */ .btn-primary, .btn-secondary { display: inline-flex !important; align-items: center !important; gap: 6px !important; height: 32px !important; padding: 0 12px !important; border-radius: 6px !important; font-size: 0.8rem !important; font-weight: 500 !important; cursor: pointer !important; transition: background 0.15s ease !important; font-family: inherit !important; line-height: 1 !important; text-decoration: none !important; } .btn-primary { background: transparent !important; color: var(--accent) !important; border: 1px solid currentColor !important; } .btn-primary:hover { background: rgba(var(--accent-rgb), 0.08) !important; box-shadow: none; } .btn-secondary { background: transparent !important; color: var(--text-muted) !important; border: 1px solid var(--border) !important; } .btn-secondary:hover { color: var(--text) !important; border-color: var(--border-strong) !important; } /* Aliases - same as primary */ .btn-submit, .btn-save, .btn-success, .btn-new, .btn-add { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 10px 20px !important; border-radius: 10px !important; font-size: 0.9rem !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.2s ease !important; font-family: inherit !important; background: var(--accent) !important; color: var(--accent-text) !important; border: none !important; } .btn-submit:hover, .btn-save:hover, .btn-success:hover, .btn-new:hover, .btn-add:hover { background: var(--accent-hover) !important; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3); } /* Aliases - same as secondary */ .btn-cancel, .btn-back, .btn-close, .btn-outline { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 10px 20px !important; border-radius: 10px !important; font-size: 0.9rem !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.2s ease !important; font-family: inherit !important; background: var(--bg-surface) !important; color: var(--text-muted) !important; border: 1px solid var(--border) !important; } .btn-cancel:hover, .btn-back:hover, .btn-close:hover, .btn-outline:hover { color: var(--text) !important; border-color: var(--border-strong) !important; } /* Danger button */ .btn-danger { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 10px 20px !important; border-radius: 10px !important; font-size: 0.9rem !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.2s ease !important; font-family: inherit !important; background: #ef4444 !important; color: #fff !important; border: none !important; } .btn-danger:hover { background: #dc2626 !important; } /* Small button modifier */ .btn-sm { padding: 6px 14px !important; font-size: 0.8rem !important; } /* Icon-only button */ .btn-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; padding: 0 !important; border-radius: 8px !important; background: var(--bg-surface) !important; color: var(--text-muted) !important; border: 1px solid var(--border) !important; cursor: pointer !important; transition: all 0.2s !important; } .btn-icon:hover { color: var(--accent) !important; border-color: var(--accent) !important; } /* ======================================== SYNCFUSION INPUTS - DARK THEME ======================================== */ /* All Syncfusion inputs with .dark-input class */ .dark-input .e-input-group, .dark-input.e-input-group, .dark-input .e-ddl, .dark-input.e-ddl, .dark-input .e-control-wrapper, .dark-input.e-control-wrapper { background: var(--bg-input) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; color: var(--text) !important; min-height: 44px !important; height: 44px !important; } .dark-input .e-input-group:focus-within, .dark-input.e-input-group:focus-within, .dark-input .e-control-wrapper:focus-within { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1) !important; } .dark-input input, .dark-input .e-input, .dark-input .e-input-group input.e-input { color: var(--text) !important; font-size: 0.95rem !important; height: 42px !important; padding: 0 12px !important; } .dark-input input::placeholder, .dark-input .e-input::placeholder { color: var(--text-muted) !important; } .dark-input .e-ddl-icon, .dark-input .e-input-group-icon { color: var(--text-muted) !important; min-height: 42px !important; } /* Dropdown popup size - global fix */ .e-ddl.e-popup, .e-popup.e-ddl, .e-dropdownbase.e-popup, .e-popup.e-popup-open, .e-ddl .e-popup, .e-popup.e-control { min-height: 200px !important; max-height: 300px !important; } .e-ddl.e-popup .e-list-parent, .e-popup .e-list-parent, .e-dropdownbase .e-list-parent { max-height: 280px !important; overflow-y: auto !important; } .e-ddl.e-popup .e-list-item, .e-popup .e-list-item { padding: 10px 16px !important; font-size: 0.9rem !important; min-height: 40px !important; line-height: 1.4 !important; color: var(--text) !important; } .e-ddl.e-popup .e-list-item:hover, .e-popup .e-list-item.e-hover { background: rgba(var(--accent-rgb), 0.08) !important; color: var(--accent) !important; } .e-ddl.e-popup .e-list-item.e-active, .e-popup .e-list-item.e-active { background: rgba(var(--accent-rgb), 0.15) !important; color: var(--accent) !important; } /* Dropdown popup dark theme */ .e-ddl.e-popup, .e-popup.e-popup-open { background: var(--bg-surface) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important; } /* Dropdown popup z-index - global fix */ .e-ddl.e-popup, .e-popup.e-ddl, .e-dropdownbase.e-popup, .e-popup-open, .e-ddl-list, .e-popup.e-popup-open, .e-popup.e-control, div[id$="_popup"], .e-dropdownbase { z-index: 10000 !important; } /* Prevent containers from clipping popups */ .form-card, .content-card, .field-row, .field, .create-main { overflow: visible !important; } /* ======================================== SYNCFUSION RTE - DARK THEME ======================================== */ .dark-rte, .dark-rte .e-rte-container, .dark-rte .e-richtexteditor, .dark-rte .e-rte-content, .dark-rte .e-content { border: none !important; border-color: transparent !important; background: var(--bg-input) !important; outline: none !important; box-shadow: none !important; } .dark-rte .e-toolbar, .dark-rte .e-rte-toolbar, .dark-rte .e-toolbar-wrapper { background: var(--bg-surface) !important; border: none !important; border-bottom: 1px solid var(--border) !important; } .dark-rte .e-toolbar .e-tbar-btn { color: var(--text-muted) !important; } .dark-rte .e-toolbar .e-tbar-btn:hover { background: rgba(var(--accent-rgb), 0.1) !important; color: var(--accent) !important; } .dark-rte .e-rte-content, .dark-rte .e-rte-content .e-content { background: var(--bg-input) !important; color: var(--text) !important; border: none !important; border-color: transparent !important; } .dark-rte .e-rte-content:focus, .dark-rte .e-rte-content:focus-within { border: none !important; outline: none !important; box-shadow: none !important; } /* ======================================== SYNCFUSION DIALOG - DARK THEME (global) ======================================== */ .dark-dialog .e-dlg-header-content { background: var(--bg-surface) !important; border-bottom: 1px solid var(--border) !important; } .dark-dialog .e-dlg-header { color: var(--text) !important; font-weight: 600 !important; } .dark-dialog .e-dlg-content { background: var(--bg-surface) !important; color: var(--text) !important; } .dark-dialog .e-footer-content { background: var(--bg-surface) !important; border-top: 1px solid var(--border) !important; } /* Dialog buttons - primary (green) */ .dark-dialog .e-btn.e-primary, .dark-dialog .e-footer-content .e-btn.e-primary, .e-dialog .e-footer-content .e-btn.e-primary { background: var(--accent) !important; color: var(--accent-text) !important; border: none !important; font-weight: 600 !important; border-radius: 10px !important; padding: 10px 20px !important; font-size: 0.9rem !important; transition: all 0.2s !important; } .dark-dialog .e-btn.e-primary:hover, .e-dialog .e-footer-content .e-btn.e-primary:hover { background: var(--accent-hover) !important; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3); } /* Dialog buttons - flat/secondary (dark) */ .dark-dialog .e-btn.e-flat, .dark-dialog .e-footer-content .e-btn.e-flat, .e-dialog .e-footer-content .e-btn.e-flat { background: var(--bg-surface) !important; color: var(--text-muted) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; padding: 10px 20px !important; font-weight: 600 !important; font-size: 0.9rem !important; transition: all 0.2s !important; } .dark-dialog .e-btn.e-flat:hover, .e-dialog .e-footer-content .e-btn.e-flat:hover { color: var(--text) !important; border-color: var(--border-strong) !important; } /* Dialog buttons - danger */ .dark-dialog .e-btn.e-danger, .e-dialog .e-footer-content .e-btn.e-danger { background: #ef4444 !important; color: #fff !important; border: none !important; border-radius: 10px !important; padding: 10px 20px !important; font-weight: 600 !important; font-size: 0.9rem !important; } /* All Syncfusion dialogs - dark theme footer */ .e-dialog .e-footer-content { background: var(--bg-surface) !important; border-top: 1px solid var(--border) !important; padding: 12px 20px !important; display: flex !important; gap: 12px !important; justify-content: flex-end !important; } /* All Syncfusion dialogs - dark theme header & content */ .e-dialog .e-dlg-header-content { background: var(--bg-surface) !important; border-bottom: 1px solid var(--border) !important; } .e-dialog .e-dlg-header { color: var(--text) !important; font-weight: 600 !important; } .e-dialog .e-dlg-content { background: var(--bg-surface) !important; color: var(--text) !important; } .e-dialog .e-dlg-closeicon-btn { color: var(--text-muted) !important; } /* Force dark inputs inside ALL dialogs */ .e-dialog .dark-input .e-input-group, .e-dialog .dark-input.e-input-group, .e-dialog .dark-input .e-control-wrapper, .e-dialog .dark-input.e-control-wrapper, .e-dialog .e-input-group, .e-dialog .e-control-wrapper { background: var(--bg-input) !important; background-color: var(--accent-text) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; color: #e2e8f0 !important; min-height: 44px !important; height: 44px !important; } .e-dialog .e-input-group:focus-within, .e-dialog .e-control-wrapper:focus-within { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1) !important; } .e-dialog input, .e-dialog .e-input, .e-dialog .e-input-group input.e-input { color: #e2e8f0 !important; background: transparent !important; font-size: 0.95rem !important; height: 42px !important; } .e-dialog input::placeholder, .e-dialog .e-input::placeholder { color: #64748b !important; } .e-dialog input:-webkit-autofill, .e-dialog input:-webkit-autofill:hover, .e-dialog input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--bg-body) inset !important; -webkit-text-fill-color: #e2e8f0 !important; border: 1px solid var(--border) !important; } .e-dialog .e-ddl-icon, .e-dialog .e-input-group-icon { color: #64748b !important; } .dark-dialog .e-dlg-closeicon-btn { color: var(--text-muted) !important; } .field-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } /* Recorder button full width */ .recorder-wrapper { width: 100%; } .recorder-wrapper button, .recorder-wrapper .btn, .recorder-wrapper [class*="record"] { width: 100% !important; border-radius: 10px !important; justify-content: center !important; } /* Grid styles: see consolidated SfGrid section */ /* ======================================== GLOBAL PAGE STYLES - DARK THEME ======================================== */ .page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; } .page-title { font-size: 1.4rem; font-weight: 700; color: var(--text); margin: 0; } .page-subtitle { color: var(--text-muted); font-size: 0.85rem; margin: 4px 0 0; } .header-actions { display: flex; gap: 10px; align-items: center; } .content-card { background: var(--bg-surface); border-radius: 10px; border: 1px solid var(--border); box-shadow: 0 1px 3px var(--shadow); overflow: hidden; width: 100%; } /* ======================================== GLOBAL BUTTON STYLES - DARK THEME ======================================== */ button.btn-primary, a.btn-primary, .btn-primary { display: inline-flex !important; align-items: center !important; gap: 6px; height: 32px !important; padding: 0 12px !important; background: transparent !important; color: var(--accent) !important; border: 1px solid currentColor !important; border-radius: 6px !important; font-size: 0.8rem !important; font-weight: 500 !important; cursor: pointer; transition: background 0.15s ease; font-family: inherit; white-space: nowrap; line-height: 1; text-decoration: none; } button.btn-primary:hover, a.btn-primary:hover, .btn-primary:hover { background: rgba(var(--accent-rgb), 0.08) !important; color: var(--accent) !important; box-shadow: none; } button.btn-primary:active, .btn-primary:active { background: rgba(var(--accent-rgb), 0.14) !important; color: var(--accent) !important; } button.btn-secondary, a.btn-secondary, .btn-secondary { display: inline-flex !important; align-items: center !important; gap: 6px; height: 32px !important; padding: 0 12px !important; background: transparent !important; color: var(--text-muted) !important; border: 1px solid var(--border) !important; border-radius: 6px !important; font-size: 0.8rem !important; font-weight: 500 !important; cursor: pointer; transition: all 0.2s ease; font-family: inherit; white-space: nowrap; line-height: 1.4; text-decoration: none; } button.btn-secondary:hover, a.btn-secondary:hover, .btn-secondary:hover { background: var(--bg-hover) !important; border-color: var(--accent) !important; color: var(--accent) !important; } /* ======================================== GLOBAL BADGE STYLES ======================================== */ .status-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; color: white; white-space: nowrap; line-height: 1.4; } /* ======================================== STATS ROW - DARK THEME ======================================== */ .stats-row { display: flex; gap: 12px; margin-bottom: 20px; } .stat-item { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px 18px; min-width: 100px; display: flex; flex-direction: column; gap: 2px; transition: all 0.2s ease; } .stat-item:hover { box-shadow: 0 4px 12px var(--shadow); transform: translateY(-1px); } .stat-number { font-size: 1.5rem; font-weight: 700; color: var(--text); line-height: 1; } .stat-label { font-size: 0.7rem; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; } .stat-item.open .stat-number { color: var(--accent); } .stat-item.closed .stat-number { color: #3fb950; } .stat-item.overdue .stat-number { color: #d29922; } .stat-item.sla-breached .stat-number { color: #f85149; } /* ======================================== GRID ACTION BUTTONS - DARK THEME ======================================== */ .grid-action-btn { background: none; border: 1px solid transparent; cursor: pointer; padding: 5px; border-radius: 6px; color: var(--text-muted); transition: all 0.15s ease; display: inline-flex; align-items: center; justify-content: center; } .grid-action-btn:hover { background: var(--bg-hover); border-color: var(--border); color: var(--text); } .grid-action-btn.danger:hover, .grid-action-btn[style*="ef4444"]:hover { background: rgba(248, 81, 73, 0.15); border-color: rgba(248, 81, 73, 0.3); } /* Counter badges in grids */ .counter-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; border-radius: 12px; background: var(--bg-hover); color: var(--text-muted); font-size: 12px; font-weight: 600; padding: 0 8px; } .counter-badge.blue { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); } .counter-badge.green { background: rgba(63, 185, 80, 0.15); color: #3fb950; } .counter-badge.red { background: rgba(248, 81, 73, 0.15); color: #f85149; } /* ======================================== SCRIPT / CODE BLOCKS ======================================== */ .script-block { position: relative; background: var(--bg-body); border-radius: 8px; padding: 14px; margin-top: 8px; border: 1px solid var(--border); } .script-block pre { color: var(--text); font-size: 12px; line-height: 1.7; white-space: pre-wrap; word-break: break-all; margin: 0; font-family: 'Fira Code', Consolas, monospace; } .script-copy-btn { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 12px; background: rgba(255,255,255,.06); border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted); cursor: pointer; font-size: 12px; font-weight: 500; transition: all 0.15s; } .script-copy-btn:hover { background: rgba(255,255,255,.1); color: var(--text); } .api-key-display { margin-top: 8px; padding: 8px 12px; background: var(--bg-body); color: #3fb950; border-radius: 6px; border: 1px solid var(--border); font-family: monospace; font-size: 12px; word-break: break-all; } /* Grid styles: see consolidated SfGrid section */ /* ======================================== RESPONSIVE ======================================== */ @media (max-width: 768px) { .page-header { flex-direction: column; gap: 16px; } .stats-row { flex-wrap: wrap; } .stat-item { flex: 1; min-width: 80px; } } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #3fb950; } .invalid { outline: 1px solid #f85149; } .validation-message { color: #f85149; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #f85149; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: var(--border); } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--text-muted); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* ======================================== GLOBAL DIALOG STYLES - DARK THEME ======================================== */ /* Dialog Container */ .custom-dialog.e-dialog { border-radius: 12px !important; border: 1px solid var(--border) !important; box-shadow: 0 16px 48px var(--shadow-strong) !important; overflow: visible; background: var(--bg-surface) !important; } /* Dialog Header */ .custom-dialog .e-dlg-header-content { background: var(--bg-surface) !important; border-bottom: 1px solid var(--border) !important; padding: 16px 20px !important; } .custom-dialog .e-dlg-header { font-size: 1rem !important; font-weight: 600 !important; color: var(--text) !important; } /* Custom Dialog Header with Icon */ .dialog-header { display: flex; align-items: center; gap: 12px; } .dialog-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--accent); color: var(--accent-text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dialog-icon.danger { background: #f85149; } .dialog-icon.success { background: #3fb950; } .dialog-icon.warning { background: #d29922; } .dialog-title-content { display: flex; flex-direction: column; gap: 2px; } .dialog-title { font-size: 1rem; font-weight: 600; color: var(--text); line-height: 1.3; } .dialog-subtitle { font-size: 0.8rem; color: var(--text-muted); font-weight: 400; } /* Dialog Close Button */ .custom-dialog .e-dlg-closeicon-btn { background: var(--bg-hover) !important; border-radius: 6px !important; width: 30px !important; height: 30px !important; transition: all 0.2s ease !important; } .custom-dialog .e-dlg-closeicon-btn:hover { background: var(--border) !important; } .custom-dialog .e-dlg-closeicon-btn .e-icon-dlg-close { color: var(--text-muted) !important; font-size: 12px !important; } /* Dialog Content */ .custom-dialog .e-dlg-content { padding: 20px !important; background: var(--bg-surface) !important; } /* Dialog Form */ .dialog-form { padding: 0; } .form-group { margin-bottom: 16px; } .form-group:last-child { margin-bottom: 0; } .custom-dialog .form-label, .dialog-form .form-label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--text); margin-bottom: 6px; } .form-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 6px; display: block; } /* Syncfusion Input Overrides - Dark */ .custom-dialog .e-input-group, .custom-dialog .e-input-group.e-control-wrapper { border-radius: 6px !important; border: 1px solid var(--border) !important; background: var(--bg-body) !important; transition: all 0.2s ease !important; } .custom-dialog .e-input-group:hover, .custom-dialog .e-input-group.e-control-wrapper:hover { border-color: var(--border-strong) !important; } .custom-dialog .e-input-group.e-input-focus, .custom-dialog .e-input-group.e-control-wrapper.e-input-focus { border-color: var(--accent) !important; box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.15) !important; } .custom-dialog .e-input-group input.e-input, .custom-dialog .e-input-group textarea.e-input { padding: 9px 12px !important; font-size: 0.875rem !important; color: var(--text) !important; background: transparent !important; } .custom-dialog .e-input-group input.e-input::placeholder, .custom-dialog .e-input-group textarea.e-input::placeholder { color: var(--text-muted) !important; } /* Syncfusion Checkbox - Dark */ .custom-dialog .e-checkbox-wrapper .e-frame { border-radius: 4px !important; border: 2px solid var(--border-strong) !important; background: var(--bg-body) !important; } .custom-dialog .e-checkbox-wrapper .e-frame.e-check { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-text) !important; } .custom-dialog .e-checkbox-wrapper .e-label { color: var(--text) !important; font-size: 0.875rem !important; } /* Dialog Footer/Buttons */ .custom-dialog .e-footer-content { background: var(--bg-surface) !important; border-top: 1px solid var(--border) !important; padding: 14px 20px !important; display: flex; justify-content: flex-end; gap: 10px; } .custom-dialog .e-footer-content .e-btn { border-radius: 6px !important; padding: 9px 18px !important; font-size: 0.875rem !important; font-weight: 500 !important; transition: all 0.2s ease !important; min-width: 90px; } /* Secondary Button (Cancelar) */ .custom-dialog .e-footer-content .e-flat, .custom-dialog .e-footer-content .dialog-btn-secondary { background: var(--bg-surface) !important; border: 1px solid var(--border) !important; color: var(--text) !important; } .custom-dialog .e-footer-content .e-flat:hover, .custom-dialog .e-footer-content .dialog-btn-secondary:hover { background: var(--bg-hover) !important; border-color: var(--accent) !important; color: var(--accent) !important; } /* Primary Button (Salvar) */ .custom-dialog .e-footer-content .e-primary, .custom-dialog .e-footer-content .dialog-btn-primary { background: var(--accent) !important; border: none !important; color: var(--accent-text) !important; } .custom-dialog .e-footer-content .e-primary:hover, .custom-dialog .e-footer-content .dialog-btn-primary:hover { background: var(--accent-hover) !important; box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.3) !important; } /* Danger Button (Excluir) */ .custom-dialog .e-footer-content .e-danger { background: #f85149 !important; border: none !important; color: white !important; } .custom-dialog .e-footer-content .e-danger:hover { background: #ff6e67 !important; box-shadow: 0 2px 8px rgba(248, 81, 73, 0.3) !important; } /* Delete Confirmation Content */ .delete-confirm { text-align: center; padding: 8px 0; } .delete-confirm p { margin: 0 0 8px 0; color: var(--text); } .delete-confirm p:last-child { margin-bottom: 0; } .delete-confirm .text-muted { color: var(--text-muted) !important; font-size: 0.85rem; } /* Dialog Overlay - must be BEHIND the dialog, not on top */ .e-dlg-overlay { background: rgba(0, 0, 0, 0.5) !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; /* Trava o overlay ABAIXO do dialog. O Syncfusion fixa o z-index do dialog inline (=10000) e nao da pra subir via CSS externo. O dialog e o overlay sao IRMAOS no .e-dlg-container; empatados em 10000, o overlay (posterior no DOM) cobria o dialog -> modal de video no Details ficava escurecido. Solucao: baixar o overlay para 9999, abaixo do dialog (10000). */ z-index: 9999 !important; } /* Ensure dialog is always above overlay */ .e-dialog { z-index: 10001 !important; } /* O container do dialog precisa ficar acima do overlay tambem: dependendo da versao do Syncfusion o overlay e irmao do container (nao filho), entao elevar apenas .e-dialog nao basta — o container inteiro (com o dialog dentro) fica preso abaixo do overlay em paginas com z-index alto (grid). Corrige o modal de video no Details, que aparecia escurecido/atras do overlay. */ .e-dlg-container { z-index: 10002 !important; } /* ======================================== VIDEO PLAYER MODAL - DARK THEME ======================================== */ .video-modal.e-dialog { border-radius: 12px !important; overflow: hidden; border: 1px solid var(--border) !important; } .video-modal .e-dlg-header-content { background: var(--bg-body) !important; border-bottom: none !important; } .video-modal .e-dlg-header { color: var(--text) !important; } .video-modal .e-dlg-closeicon-btn { background: rgba(255, 255, 255, 0.08) !important; } .video-modal .e-dlg-closeicon-btn:hover { background: rgba(255, 255, 255, 0.15) !important; } .video-modal .e-dlg-closeicon-btn .e-icon-dlg-close { color: var(--text) !important; } .video-modal .e-dlg-content { background: var(--bg-body) !important; padding: 0 !important; } /* ======================================== BOOTSTRAP FORM OVERRIDES - DARK THEME ======================================== */ .form-control, .form-select { background-color: var(--bg-body) !important; color: var(--text) !important; border-color: var(--border) !important; } .form-control:focus, .form-select:focus { background-color: var(--bg-body) !important; color: var(--text) !important; border-color: var(--accent) !important; box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.15) !important; } .form-control::placeholder { color: var(--text-muted) !important; } .form-label { color: var(--text); } .card { background: var(--bg-surface); border-color: var(--border); } .table { color: var(--text); } .table > :not(caption) > * > * { background-color: var(--bg-surface); border-bottom-color: var(--bg-hover); color: var(--text); } .table-hover > tbody > tr:hover > * { background-color: var(--bg-hover); } /* ======================================== COMPREHENSIVE DARK THEME - NUCLEAR OVERRIDES Forces dark theme on ALL Syncfusion components and any remaining light elements ======================================== */ /* === GLOBAL CATCH-ALL === */ * { scrollbar-color: var(--border) var(--bg-body); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg-body); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); } /* === SYNCFUSION GLOBAL DARK === */ .e-control, .e-lib, .e-btn, .e-css { color: var(--text); } /* Grid styles: see consolidated SfGrid section */ /* === SYNCFUSION INPUTS === */ .e-input-group, .e-input-group.e-control-wrapper, .e-float-input, .e-float-input.e-control-wrapper { background: var(--bg-body) !important; border-color: var(--border) !important; } .e-input-group:hover, .e-input-group.e-control-wrapper:hover { border-color: var(--border-strong) !important; } .e-input-group.e-input-focus, .e-input-group.e-control-wrapper.e-input-focus { border-color: var(--accent) !important; box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.15) !important; } .e-input, input.e-input, textarea.e-input, .e-input-group input.e-input, .e-input-group textarea.e-input { color: var(--text) !important; background: transparent !important; } .e-input::placeholder, input.e-input::placeholder, .e-input-group input::placeholder { color: var(--text-muted) !important; } .e-input-group .e-input-group-icon, .e-input-group.e-control-wrapper .e-input-group-icon { color: var(--text-muted) !important; background: transparent !important; border-color: var(--border) !important; } .e-float-input label.e-float-text, .e-float-input.e-control-wrapper label.e-float-text { color: var(--text-muted) !important; } /* === SYNCFUSION DROPDOWNS === */ .e-ddl.e-popup, .e-popup.e-popup-open, .e-dropdownbase .e-list-parent, .e-dropdown-popup { background: var(--bg-surface) !important; border: 1px solid var(--border) !important; box-shadow: 0 8px 24px var(--shadow-strong) !important; } .e-dropdownbase .e-list-item, .e-list-item { background: transparent !important; color: var(--text) !important; border-color: var(--bg-hover) !important; } .e-dropdownbase .e-list-item:hover, .e-list-item:hover, .e-dropdownbase .e-list-item.e-hover, .e-list-item.e-hover { background: var(--bg-hover) !important; color: var(--text) !important; } .e-dropdownbase .e-list-item.e-active, .e-list-item.e-active { background: rgba(var(--accent-rgb), 0.15) !important; color: var(--accent) !important; } /* === SYNCFUSION DIALOG (global, not just custom-dialog) === */ .e-dialog, .e-dlg-container .e-dialog { background: var(--bg-surface) !important; border: 1px solid var(--border) !important; box-shadow: 0 16px 48px var(--shadow-strong) !important; height: auto !important; max-height: 90vh !important; } .e-dialog .e-dlg-content, .e-dlg-container .e-dialog .e-dlg-content { height: auto !important; max-height: calc(90vh - 120px) !important; overflow-y: auto !important; } .e-dlg-header-content { background: var(--bg-surface) !important; border-bottom: 1px solid var(--border) !important; } .e-dlg-header { color: var(--text) !important; } .e-dlg-content { background: var(--bg-surface) !important; color: var(--text) !important; } .e-footer-content { background: var(--bg-surface) !important; border-top: 1px solid var(--border) !important; } .e-dlg-closeicon-btn { background: var(--bg-hover) !important; } .e-dlg-closeicon-btn:hover { background: var(--border) !important; } .e-icon-dlg-close { color: var(--text-muted) !important; } /* === SYNCFUSION BUTTONS (global) === */ .e-btn, .e-css.e-btn { background: var(--bg-hover) !important; color: var(--text) !important; border: 1px solid var(--border) !important; } .e-btn:hover { background: var(--border) !important; } .e-btn.e-primary, .e-css.e-btn.e-primary { background: var(--accent) !important; color: var(--accent-text) !important; border-color: var(--accent) !important; } .e-btn.e-primary:hover { background: var(--accent-hover) !important; } .e-btn.e-flat { background: transparent !important; border: 1px solid var(--border) !important; color: var(--text) !important; } .e-btn.e-flat:hover { background: var(--bg-hover) !important; } /* === SYNCFUSION TABS === */ .e-tab, .e-tab .e-tab-header { background: var(--bg-surface) !important; border-color: var(--border) !important; } .e-tab .e-tab-header .e-toolbar-item .e-tab-text { color: var(--text-muted) !important; } .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text { color: var(--accent) !important; } .e-tab .e-tab-header .e-indicator { background: var(--accent) !important; } .e-tab .e-content { background: var(--bg-surface) !important; color: var(--text) !important; } /* === SYNCFUSION CARDS === */ .e-card { background: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--text) !important; } .e-card .e-card-header { border-color: var(--border) !important; } /* === SYNCFUSION TOOLTIP === */ .e-tooltip-wrap { background: var(--bg-hover) !important; border: 1px solid var(--border) !important; color: var(--text) !important; } /* Checkbox styles: see consolidated SfGrid section */ .e-switch-wrapper .e-switch-inner, .e-switch-wrapper .e-switch-off { background: var(--border-strong) !important; } .e-switch-wrapper .e-switch-on { background: var(--accent) !important; } /* === SYNCFUSION CHARTS === */ .e-chart, .e-accumulationchart { background: transparent !important; } .e-chart svg, .e-accumulationchart svg { border-radius: 8px; } .e-chart text, .e-accumulationchart text { fill: var(--text-muted) !important; } .e-chart .e-chart-legend text, .e-accumulationchart .e-chart-legend text { fill: var(--text) !important; } /* Chart axis lines and grid */ .e-chart .e-axis-line, .e-chart .e-grid-lines line { stroke: var(--border) !important; } .e-chart .e-minor-grid-lines line { stroke: var(--bg-hover) !important; } /* Chart title */ .e-chart .e-chart-title text, .e-accumulationchart .e-chart-title text { fill: var(--text) !important; font-weight: 600 !important; } /* === SYNCFUSION RICH TEXT EDITOR === */ .e-richtexteditor { background: var(--bg-surface) !important; border-color: var(--border) !important; } .e-richtexteditor .e-rte-content, .e-richtexteditor .e-content { background: var(--bg-body) !important; color: var(--text) !important; } .e-richtexteditor .e-rte-toolbar { background: var(--bg-surface) !important; border-color: var(--border) !important; } /* === SYNCFUSION DATEPICKER / CALENDAR === */ .e-calendar, .e-datepicker.e-popup-wrapper { background: var(--bg-surface) !important; border-color: var(--border) !important; } .e-calendar .e-header, .e-calendar .e-day-header { color: var(--text-muted) !important; } .e-calendar .e-cell span { color: var(--text) !important; } .e-calendar .e-cell.e-selected span { background: var(--accent) !important; color: var(--accent-text) !important; } .e-calendar .e-cell:hover span { background: var(--bg-hover) !important; } /* === SYNCFUSION TOAST === */ .e-toast-container .e-toast { background: var(--bg-surface) !important; border: 1px solid var(--border) !important; color: var(--text) !important; box-shadow: 0 8px 24px var(--shadow-strong) !important; } /* === SYNCFUSION SPINNER === */ .e-spinner-pane { background: rgba(13, 17, 23, 0.7) !important; } /* === SYNCFUSION NUMERICTEXT === */ .e-numeric .e-input-group-icon { color: var(--text-muted) !important; background: transparent !important; } /* === SYNCFUSION COLORPICKER === */ .e-colorpicker-wrapper .e-split-btn-wrapper { border-color: var(--border) !important; } /* === BOOTSTRAP DARK OVERRIDES === */ .bg-white, .bg-light { background-color: var(--bg-surface) !important; } .bg-body-tertiary { background-color: var(--bg-surface) !important; } .text-dark { color: var(--text) !important; } .text-muted { color: var(--text-muted) !important; } .border { border-color: var(--border) !important; } .shadow, .shadow-sm, .shadow-lg { box-shadow: 0 4px 12px var(--shadow-strong) !important; } .list-group-item { background-color: var(--bg-surface); border-color: var(--border); color: var(--text); } .list-group-item:hover { background-color: var(--bg-hover); } .modal-content { background-color: var(--bg-surface); border-color: var(--border); color: var(--text); } .modal-header, .modal-footer { border-color: var(--border); } .dropdown-menu { background-color: var(--bg-surface); border-color: var(--border); } .dropdown-item { color: var(--text); } .dropdown-item:hover { background-color: var(--bg-hover); color: var(--text); } .nav-tabs { border-color: var(--border); } .nav-tabs .nav-link { color: var(--text-muted); } .nav-tabs .nav-link.active { background-color: var(--bg-surface); border-color: var(--border) var(--border) #ffffff; color: var(--text); } .badge.bg-light { background-color: var(--bg-hover) !important; color: var(--text) !important; } .badge.text-dark { color: var(--text) !important; } .alert { border-color: var(--border); } .alert-info { background-color: rgba(var(--accent-rgb), 0.1); border-color: rgba(var(--accent-rgb), 0.2); color: var(--accent); } .alert-warning { background-color: rgba(210, 153, 34, 0.1); border-color: rgba(210, 153, 34, 0.2); color: #d29922; } .alert-danger { background-color: rgba(248, 81, 73, 0.1); border-color: rgba(248, 81, 73, 0.2); color: #f85149; } .alert-success { background-color: rgba(63, 185, 80, 0.1); border-color: rgba(63, 185, 80, 0.2); color: #3fb950; } /* === ACCOUNT/LOGIN PAGE === Antes tinha [class*="login"] / [class*="account"], que pintava de fundo do tema qualquer elemento com "login" no nome — inclusive todo o sglogin-* da tela de login (painel, carrossel, avatar) e deixava blocos brancos por cima do painel de marca. A tela de login traz o proprio estilo completo, entao ficam so as classes exatas. */ .login-page, .account-page { background: var(--bg-body); color: var(--text); } /* === EMPTY STATE UNIVERSAL === */ .empty-state { color: var(--text-muted); } /* === GRID CONTENT OVERFLOW FIX === */ .content-card { display: flex; flex-direction: column; } .content-card .e-grid { flex: 1; min-height: 0; } /* === PREVENT ANY WHITE BACKGROUNDS === */ div, section, article, aside, main, nav, header, footer { color: inherit; } /* Spinner override */ .spinner-border.text-primary { color: var(--accent) !important; } /* SLA indicator dark variants */ .sla-indicator.sla-ontrack { background: rgba(63, 185, 80, 0.15) !important; color: #3fb950 !important; } .sla-indicator.sla-warning { background: rgba(210, 153, 34, 0.15) !important; color: #d29922 !important; } .sla-indicator.sla-breached { background: rgba(248, 81, 73, 0.15) !important; color: #f85149 !important; } .sla-indicator.sla-met { background: rgba(var(--accent-rgb), 0.15) !important; color: var(--accent) !important; } /* Filter styles: see consolidated SfGrid section */ /* Syncfusion notification */ .e-toast { background: var(--bg-surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; } /* Data label in charts */ .e-chart .e-data-label text, .e-accumulationchart .e-data-label text { fill: var(--text) !important; } /* ======================================== TEMPLATE REFINEMENTS - KPI Cards & Animations ======================================== */ /* KPI Card hover effect (dashboard, KB) */ .kpi-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .kpi-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--shadow); } /* KPI icon badge */ .kpi-icon-badge { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .kpi-icon-badge.accent { background: rgba(var(--accent-rgb), 0.1); color: var(--accent); } .kpi-icon-badge.yellow { background: rgba(234, 179, 8, 0.1); color: #eab308; } .kpi-icon-badge.blue { background: rgba(59, 130, 246, 0.1); color: #3b82f6; } .kpi-icon-badge.green { background: rgba(34, 197, 94, 0.1); color: #22c55e; } .kpi-icon-badge.red { background: rgba(239, 68, 68, 0.1); color: #ef4444; } /* KPI trend indicator */ .kpi-trend { margin-top: 8px; font-size: 0.75rem; padding: 2px 8px; border-radius: 4px; width: fit-content; } .kpi-trend.neutral { background: var(--bg-body); color: var(--text-muted); } .kpi-trend.warning { background: rgba(234, 179, 8, 0.08); color: #eab308; } .kpi-trend.info { background: rgba(59, 130, 246, 0.08); color: #3b82f6; } .kpi-trend.success { background: rgba(34, 197, 94, 0.08); color: #22c55e; } .kpi-trend.danger { background: rgba(239, 68, 68, 0.08); color: #ef4444; } /* ======================================== TAB BUTTONS (Filter Tabs) ======================================== */ .tab-filter-group { display: flex; gap: 4px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: 4px; } .tab-btn { padding: 6px 16px; border-radius: 6px; font-size: 0.875rem; border: none; cursor: pointer; transition: all 0.15s ease; background: transparent; color: var(--text-muted); font-weight: 500; } .tab-btn:hover:not(.active) { background: rgba(var(--accent-rgb), 0.08); color: var(--text); } .tab-btn.active { background: var(--accent); color: var(--accent-text); font-weight: 600; } /* ======================================== CONVERSATION MESSAGES (Ticket Detail) ======================================== */ .message-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; } .message-card.agent { border-left: 2px solid var(--accent); } .message-card.system-note { padding: 16px; background: var(--bg-surface); } .message-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .message-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 700; flex-shrink: 0; } .message-avatar.customer { background: #4b5563; color: #fff; } .message-avatar.agent-avatar { background: var(--accent); color: var(--text); } .message-role-badge { padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 500; } .message-role-badge.customer { background: rgba(59, 130, 246, 0.15); color: #3b82f6; } .message-role-badge.agent-role { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); } .message-body { font-size: 0.875rem; color: var(--text-body); line-height: 1.6; } .message-attachment { display: flex; align-items: center; gap: 8px; padding: 12px; background: var(--bg-body); border-radius: 8px; border: 1px solid var(--border); width: fit-content; margin-top: 12px; } /* ======================================== TAG CHIPS ======================================== */ .tag-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; background: var(--bg-body); border: 1px solid var(--border); color: var(--text-muted); transition: all 0.15s; } .tag-chip:hover { border-color: rgba(var(--accent-rgb), 0.4); color: var(--accent); } .tag-chip-accent { background: rgba(var(--accent-rgb), 0.12); color: var(--accent); border: 1px solid rgba(var(--accent-rgb), 0.25); } /* ======================================== TYPING INDICATOR (Chat) ======================================== */ @keyframes typingBounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } .typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: typingBounce 1.4s infinite ease-in-out; } .typing-dot:nth-child(1) { animation-delay: 0s; } .typing-dot:nth-child(2) { animation-delay: 0.2s; } .typing-dot:nth-child(3) { animation-delay: 0.4s; } /* ======================================== CHAT STYLES ======================================== */ .chat-item { transition: background 0.15s; } .chat-item:hover { background: rgba(var(--accent-rgb), 0.06); } .chat-item.active { background: rgba(var(--accent-rgb), 0.08); } .msg-agent { border-left: 3px solid rgba(var(--accent-rgb), 0.4); background: rgba(var(--accent-rgb), 0.04); } /* ======================================== SLA PROGRESS BAR ======================================== */ .sla-progress-bar { height: 8px; background: var(--bg-body); border-radius: 9999px; overflow: hidden; } .sla-progress-fill { height: 100%; border-radius: 9999px; transition: width 0.3s ease; } .sla-progress-fill.on-track { background: #22c55e; } .sla-progress-fill.warning { background: #eab308; } .sla-progress-fill.breached { background: #ef4444; } .sla-progress-fill.met { background: #3b82f6; } /* ======================================== STAT ITEMS WITH COLORED LEFT BORDER ======================================== */ .stat-item-bordered { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px 20px; } .stat-item-bordered.blue { border-left: 4px solid #3b82f6; } .stat-item-bordered.green { border-left: 4px solid #22c55e; } .stat-item-bordered.yellow { border-left: 4px solid #eab308; } .stat-item-bordered.red { border-left: 4px solid #ef4444; } /* ======================================== ARTICLE CARDS (KB) ======================================== */ .article-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; cursor: pointer; } .article-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--shadow); border-color: rgba(var(--accent-rgb), 0.3); } /* KB Category sidebar item */ .cat-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 8px; font-size: 0.875rem; border: 1px solid transparent; transition: all 0.15s; color: var(--text-muted); text-decoration: none; margin-bottom: 2px; } .cat-item:hover { background: rgba(var(--accent-rgb), 0.06); color: var(--text); } .cat-item.active { background: rgba(var(--accent-rgb), 0.1); color: var(--accent); border-color: rgba(var(--accent-rgb), 0.25); } /* ======================================== DROP ZONE (File Upload) ======================================== */ .drop-zone { border: 2px dashed var(--border); border-radius: 8px; padding: 32px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; } .drop-zone:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.04); } /* ======================================== CHART CARD WITH HEADER BORDER ======================================== */ .chart-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .chart-card-header { padding: 16px 20px; border-bottom: 1px solid var(--border); } .chart-card-body { padding: 20px; } /* Pager styles: see consolidated SfGrid section */ /* ======================================== ONLINE INDICATOR DOT ======================================== */ .online-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #ffffff; position: absolute; bottom: -1px; right: -1px; } .online-dot.online { background: #22c55e; } .online-dot.waiting { background: #eab308; } .online-dot.offline { background: #6b7280; } /* ======================================== SWEETALERT2 - DARK THEME ======================================== */ .swal-dark-popup { border: 1px solid var(--border) !important; border-radius: 12px !important; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4) !important; font-family: var(--font-app) !important; } .swal-dark-title { font-size: 1rem !important; font-weight: 600 !important; } .swal-dark-progress { background: rgba(var(--accent-rgb), 0.3) !important; } .swal-confirm-btn { background: var(--accent) !important; color: var(--accent-text) !important; font-weight: 600 !important; border-radius: 8px !important; padding: 10px 24px !important; font-size: 0.9rem !important; } .swal-confirm-btn:hover { background: var(--accent-hover) !important; } .swal-cancel-btn { background: var(--bg-surface) !important; color: var(--text-muted) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; padding: 10px 24px !important; font-size: 0.9rem !important; } .swal-cancel-btn:hover { border-color: var(--accent) !important; color: var(--accent) !important; } .swal2-icon { border-color: transparent !important; } /* ======================================== GRID CELL OVERFLOW FIX ======================================== */ .e-grid .e-rowcell .requester-cell, .e-grid .e-rowcell .agent-cell { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; } .e-grid .e-rowcell .requester-cell > div:last-child, .e-grid .e-rowcell .agent-cell > div:last-child { min-width: 0; overflow: hidden; } .e-grid .e-rowcell .requester-cell span, .e-grid .e-rowcell .agent-cell span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } /* ======================================== SYNCFUSION SFGRID - CONSOLIDATED (from sfgrid.md) All grid, pager, filter, checkbox, dialog, grouping, toolbar, scrollbar styles in one place. ======================================== */ /* --- 1. Grid Principal (.e-grid) --- */ .e-grid { background: var(--bg-surface) !important; border-color: var(--border) !important; border-radius: var(--radius-lg, 12px) !important; overflow: hidden; width: 100% !important; max-width: 100% !important; box-sizing: border-box; } .e-grid .e-headercell { background: var(--bg-surface) !important; color: var(--text-muted) !important; font-weight: 600 !important; font-size: 12px !important; text-transform: uppercase; letter-spacing: 0.5px; border-color: var(--border) !important; white-space: nowrap !important; overflow: visible !important; text-overflow: unset !important; } .e-grid .e-headercelldiv { white-space: nowrap !important; overflow: visible !important; text-overflow: unset !important; } .e-grid .e-rowcell { background: var(--bg-surface) !important; color: var(--text) !important; border-color: var(--border) !important; font-size: 14px !important; } .e-grid .e-row:hover .e-rowcell { background: var(--bg-hover) !important; } .e-grid .e-altrow .e-rowcell { background: var(--bg-surface) !important; } .e-grid .e-altrow:hover .e-rowcell { background: var(--bg-hover) !important; } .e-grid .e-rowcell.e-selectionbackground, .e-grid .e-row.e-altrow .e-selectionbackground { background: rgba(var(--accent-rgb), 0.12) !important; } /* Grid Header & Content Overflow */ /* ATENÇÃO: nada de largura/overflow forçado daqui para baixo. Estas regras forçavam `width: 100% !important` na tabela e no conteúdo do grid. Ao redimensionar uma coluna, o Syncfusion define a largura em pixels e o CSS a puxava de volta para 100% do container — cabeçalho e corpo passavam a calcular larguras diferentes (o corpo tem barra de rolagem, o cabeçalho não) e as colunas saíam do lugar. O ERP não toca em geometria de grid; só em cor, borda e fonte. Aqui idem: o componente resolve sozinho. */ .e-grid .e-gridheader { border-color: var(--border) !important; } .e-grid .e-gridcontent { border-color: var(--border) !important; } /* Sem max-height aqui: a altura do grid e definida pela propriedade Height do componente (ou pelo conteudo, quando ela nao existe). */ .e-grid .e-gridcontent .e-content { background: var(--bg-surface) !important; } .e-grid, .e-grid .e-gridcontent, .e-grid .e-table, .e-grid .e-gridheader, .e-grid .e-headercontent, .e-grid .e-gridheader .e-table { background: var(--bg-surface) !important; color: var(--text) !important; } /* --- 2. Paginacao (.e-pager) --- */ .e-pager, .e-grid .e-pager { background: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--text-muted) !important; } .e-pager .e-pagercontainer { background: transparent !important; } .e-pager .e-numericitem { background: transparent !important; color: var(--text-muted) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm, 6px) !important; } .e-pager .e-numericitem:hover { background: var(--bg-hover) !important; color: var(--text) !important; } .e-pager .e-currentitem { background: var(--accent) !important; color: var(--accent-text) !important; border-color: var(--accent) !important; border-radius: var(--radius-sm, 6px) !important; font-weight: 600 !important; } .e-pager .e-first, .e-pager .e-prev, .e-pager .e-next, .e-pager .e-last, .e-pager .e-pp, .e-pager .e-np { background: transparent !important; color: var(--text-muted) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm, 6px) !important; } .e-pager .e-first:hover, .e-pager .e-prev:hover, .e-pager .e-next:hover, .e-pager .e-last:hover, .e-pager .e-pp:hover, .e-pager .e-np:hover { background: var(--bg-hover) !important; color: var(--text) !important; } .e-pager .e-icons { color: var(--text-muted) !important; } .e-pager .e-parentmsgbar { color: var(--text-muted) !important; } .e-pager .e-pagecountmsg, .e-pager .e-pagerexternalmsg { color: var(--text-muted) !important; } .e-pager .e-pagercontainer, .e-pager .e-pagerconstant { color: var(--text-muted) !important; } .e-pager .e-disable { opacity: 0.4 !important; } .e-pager .e-link { background: transparent !important; color: var(--text-muted) !important; } .e-pager .e-link:hover { background: var(--bg-hover) !important; color: var(--text) !important; } /* --- 3. Excel-like Filter Popup --- */ .e-excelfilter, .e-checkboxfilter, .e-filterpopup { background: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--text) !important; } .e-excelfilter .e-dlg-content, .e-checkboxfilter .e-dlg-content, .e-filterpopup .e-dlg-content, .e-dlg-container .e-excelfilter .e-dlg-content, .e-dlg-container .e-checkboxfilter .e-dlg-content, .e-dlg-container .e-filterpopup .e-dlg-content, .e-dialog.e-excelfilter .e-dlg-content, .e-dialog.e-checkboxfilter .e-dlg-content, .e-dialog.e-filterpopup .e-dlg-content { background: var(--bg-surface) !important; color: var(--text) !important; overflow: visible !important; max-height: none !important; height: auto !important; } /* Popup do filtro Excel - overflow visible para submenu nao ficar cortado */ .e-excelfilter, .e-dialog.e-excelfilter, .e-checkboxfilter, .e-dialog.e-checkboxfilter { overflow: visible !important; max-height: 420px !important; } /* Checkbox accent color */ .e-excelfilter .e-checkbox-wrapper .e-frame.e-check, .e-checkboxfilter .e-checkbox-wrapper .e-frame.e-check, .e-excelfilter .e-css.e-checkbox-wrapper .e-frame.e-check, .e-checkboxfilter .e-css.e-checkbox-wrapper .e-frame.e-check { background-color: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-text) !important; } /* Checkbox unchecked border */ .e-excelfilter .e-checkbox-wrapper .e-frame, .e-checkboxfilter .e-checkbox-wrapper .e-frame { border-color: var(--border-strong) !important; background: var(--bg-input) !important; } /* Filter search input focus */ .e-excelfilter .e-searchbox .e-input-group.e-input-focus, .e-checkboxfilter .e-searchbox .e-input-group.e-input-focus { border-color: var(--accent) !important; } /* Submenu "Filtros numéricos/texto" - botão com accent */ .e-excelfilter .e-xlfl-mainftr .e-menu-item.e-focused, .e-excelfilter .e-xlfl-mainftr .e-menu-item.e-selected { background: var(--accent) !important; color: var(--accent-text) !important; border-radius: 6px !important; } .e-excelfilter .e-ftrchk, .e-checkboxfilter .e-ftrchk { color: var(--text) !important; } .e-excelfilter .e-searchbox input, .e-checkboxfilter .e-searchbox input, .e-excelfilter .e-input, .e-checkboxfilter .e-input { background: var(--bg-input) !important; color: var(--text) !important; border-color: var(--border) !important; } .e-excelfilter .e-searchbox .e-search-icon, .e-checkboxfilter .e-searchbox .e-search-icon { color: var(--text-muted) !important; } .e-excelfilter .e-footer-content button.e-primary, .e-checkboxfilter .e-footer-content button.e-primary, .e-filterpopup .e-footer-content button.e-primary { background-color: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-text) !important; font-weight: 600 !important; } .e-excelfilter .e-footer-content button.e-primary:hover, .e-checkboxfilter .e-footer-content button.e-primary:hover, .e-filterpopup .e-footer-content button.e-primary:hover { background-color: var(--accent-hover) !important; border-color: var(--accent-hover) !important; } .e-excelfilter .e-footer-content button:not(.e-primary), .e-checkboxfilter .e-footer-content button:not(.e-primary), .e-filterpopup .e-footer-content button:not(.e-primary) { background-color: transparent !important; border-color: var(--border) !important; color: var(--text-muted) !important; } .e-excelfilter .e-footer-content button:not(.e-primary):hover, .e-checkboxfilter .e-footer-content button:not(.e-primary):hover, .e-filterpopup .e-footer-content button:not(.e-primary):hover { background-color: var(--bg-hover) !important; color: var(--text) !important; } .e-excelfilter .e-footer-content, .e-checkboxfilter .e-footer-content, .e-filterpopup .e-footer-content { background: var(--bg-surface) !important; border-color: var(--border) !important; } .e-excelfilter .e-xlfl-ftrchk, .e-excelfilter .e-xlfl-cust, .e-excelfilter .e-xlfl-mainftr { color: var(--text) !important; } .e-excelfilter .e-flmenu-valuecontent, .e-excelfilter .e-xlfl-fieldset { border-color: var(--border) !important; } .e-excelfilter .e-filterdiv, .e-checkboxfilter .e-filterdiv { border-color: var(--border) !important; } .e-excelfilter .e-xlfl-clrdiv .e-xlfl-clrbtn, .e-excelfilter .e-xlfl-clrdiv span { color: var(--accent) !important; } /* Filter popup header */ .e-filter-popup .e-dlg-header-content, .e-excelfilter .e-dlg-header-content { background: var(--bg-surface) !important; } .e-checkboxfilter .e-checkboxlist, .e-checkboxfilter .e-ftrchk { background: var(--bg-surface) !important; color: var(--text) !important; } .e-grid .e-checkboxlist, .e-grid-popup .e-checkboxlist { height: 100px !important; margin-top: 5px !important; min-height: 100px !important; overflow-y: auto !important; margin-left: -8px !important; } /* Column chooser */ .e-ccdlg .e-dlg-content { background: var(--bg-surface) !important; } /* Excel Filter submenu (Filtro de Texto) - must appear above everything */ .e-excelfilter .e-contextmenu-wrapper, .e-excelfilter .e-menu-wrapper, .e-xlfl-maindiv, .e-contextmenu-wrapper.e-sfcontextmenu, .e-menu-wrapper.e-sfcontextmenu, .e-grid-menu .e-contextmenu-container, .e-filter-popup .e-contextmenu-wrapper, .e-xlflmenu { z-index: 99999 !important; } /* Submenu UL que abre do "Filtro de Texto/Numerico" */ ul.e-menu-parent.e-ul, .e-contextmenu-container ul.e-menu-parent.e-ul, .e-grid-filter-menu ul.e-menu-parent.e-ul { z-index: 2147483647 !important; background: var(--bg-surface) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important; padding: 6px 0 !important; } /* Items do submenu de filtro */ ul.e-menu-parent.e-ul .e-menu-item, .e-grid-filter-menu .e-menu-item { padding: 4px 16px !important; font-size: 13px !important; min-height: 28px !important; line-height: 28px !important; height: auto !important; } /* Separadores do submenu - reduzir espaço */ ul.e-menu-parent.e-ul .e-separator, .e-grid-filter-menu .e-separator, ul.e-menu-parent.e-ul .e-menu-separator, ul.e-menu-parent.e-ul li.e-separator { margin: 2px 0 !important; padding: 0 !important; height: 1px !important; min-height: 1px !important; } /* Container do context menu do filtro - z-index alto */ .e-contextmenu-container.e-sfcontextmenu.e-grid-filter-menu { z-index: 2147483646 !important; } /* Checkbox spinner - scrollbar vertical para ver todas as opções */ .e-checkbox-spinner, .e-checkboxfilter .e-spinner-pane, .e-excelfilter .e-spinner-pane { max-height: 250px !important; overflow-y: auto !important; overflow-x: hidden !important; } /* Excel filter custom dialog */ .e-xlfl-maindiv, .e-excelfilter .e-xlfl-maindiv { z-index: 99999 !important; background: var(--bg-surface) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important; color: var(--text) !important; } /* Context menu items (submenu dropdown) */ .e-contextmenu-wrapper ul, .e-menu-wrapper ul, .e-contextmenu-container ul { background: var(--bg-surface) !important; z-index: 99999 !important; } .e-contextmenu-wrapper ul .e-menu-item, .e-menu-wrapper ul .e-menu-item, .e-contextmenu-container .e-menu-item { background: var(--bg-surface) !important; color: var(--text) !important; } .e-contextmenu-wrapper ul .e-menu-item:hover, .e-menu-wrapper ul .e-menu-item:hover, .e-contextmenu-container .e-menu-item:hover { background: var(--bg-hover) !important; color: var(--accent) !important; } .e-contextmenu-wrapper ul .e-menu-item .e-menu-icon, .e-menu-wrapper ul .e-menu-item .e-menu-icon { color: var(--text-muted) !important; } .e-contextmenu-wrapper ul .e-menu-item:hover .e-menu-icon, .e-menu-wrapper ul .e-menu-item:hover .e-menu-icon { color: var(--accent) !important; } /* Excel filter custom condition dialog */ .e-xlfl-maindiv .e-xlfl-dlg, .e-excelfilter .e-xlfl-dlg { background: var(--bg-surface) !important; color: var(--text) !important; } .e-xlfl-maindiv .e-xlfl-fieldset, .e-xlfl-maindiv .e-xlfl-ftrchk, .e-xlfl-maindiv .e-xlfl-cust { color: var(--text) !important; border-color: var(--border) !important; } .e-xlfl-maindiv .e-input-group, .e-xlfl-maindiv .e-control-wrapper { background: var(--bg-input) !important; border-color: var(--border) !important; color: var(--text) !important; } .e-xlfl-maindiv input, .e-xlfl-maindiv .e-input, .e-xlfl-maindiv .e-dropdownbase { color: var(--text) !important; background: transparent !important; } .e-xlfl-maindiv .e-dlg-header-content { background: var(--bg-surface) !important; border-bottom: 1px solid var(--border) !important; } .e-xlfl-maindiv .e-dlg-header { color: var(--text) !important; } .e-xlfl-maindiv .e-footer-content { background: var(--bg-surface) !important; border-top: 1px solid var(--border) !important; } .e-xlfl-maindiv .e-footer-content button.e-primary { background: var(--accent) !important; color: var(--accent-text) !important; border-color: var(--accent) !important; } .e-xlfl-maindiv .e-footer-content button:not(.e-primary) { background: transparent !important; border-color: var(--border) !important; color: var(--text-muted) !important; } /* Dropdown list inside filter dialog */ .e-popup.e-ddl, .e-popup.e-popup-open { background: var(--bg-surface) !important; border-color: var(--border) !important; } .e-popup .e-list-item { background: var(--bg-surface) !important; color: var(--text) !important; } .e-popup .e-list-item:hover, .e-popup .e-list-item.e-hover { background: var(--bg-hover) !important; color: var(--accent) !important; } .e-popup .e-list-item.e-active { background: rgba(var(--accent-rgb), 0.15) !important; color: var(--accent) !important; } /* --- 4. Filter Bar --- */ .e-grid .e-filterbar, .e-grid .e-filterbarcell { background: var(--bg-surface) !important; border-color: var(--border) !important; } .e-grid .e-filterbar input, .e-grid .e-filterbarcell input.e-input { background: var(--bg-body) !important; color: var(--text) !important; border-color: var(--border) !important; } .e-grid .e-filterbarcell .e-input-group { background: var(--bg-body) !important; border-color: var(--border) !important; } /* --- 5. Filter Menu Popup --- */ .e-grid-menu, .e-filter-popup { background: var(--bg-surface) !important; border: 1px solid var(--border) !important; color: var(--text) !important; } /* --- 6. Checkboxes Syncfusion --- */ .e-checkbox-wrapper .e-frame.e-check, .e-css.e-checkbox-wrapper .e-frame.e-check { background-color: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-text) !important; } .e-checkbox-wrapper .e-frame, .e-css.e-checkbox-wrapper .e-frame { border-color: var(--border) !important; background-color: transparent !important; } .e-checkbox-wrapper .e-frame.e-check .e-icons, .e-css.e-checkbox-wrapper .e-frame.e-check .e-icons { color: var(--accent-text) !important; } .e-checkbox-wrapper .e-label, .e-css.e-checkbox-wrapper .e-label { color: var(--text) !important; } /* --- 7. Grouping --- */ .e-grid .e-groupdroparea { background: var(--bg-surface) !important; color: var(--text-muted) !important; border-color: var(--border) !important; font-size: 13px; padding: 8px 12px; } .e-grid .e-groupdroparea .e-grouped-text { color: var(--text-muted) !important; } .e-grid .e-groupdroparea .e-ungroupbutton { color: var(--text-muted) !important; } .e-grid .e-groupdroparea .e-ungroupbutton:hover { color: var(--text) !important; } .e-grid .e-groupheadercell { background: var(--bg-surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: 4px !important; } .e-grid .e-groupcaption { background: var(--bg-surface) !important; color: var(--text) !important; border-color: var(--border) !important; } .e-grid .e-recordplusexpand, .e-grid .e-recordpluscollapse { background: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--text) !important; } .e-grid .e-indentcell { background: var(--bg-surface) !important; border-color: var(--border) !important; } /* --- 8. Grid Summary/Aggregate --- */ .e-grid .e-summaryrow .e-summarycell { background: var(--bg-surface) !important; color: var(--text) !important; border-color: var(--border) !important; } /* --- 9. Grid Toolbar — padrao do ERP Segla --- No ERP a barra e flat: fundo transparente, botoes sem borda e sem caixa, icone + rotulo lado a lado, alinhados a esquerda. Antes cada botao tinha borda e fundo proprios, o que desenhava tracos verticais entre eles. */ .e-grid .e-toolbar, .e-grid .e-toolbar-items { background: transparent !important; border: none !important; } .e-grid .e-toolbar .e-toolbar-items { justify-content: flex-start !important; align-items: center !important; } /* Todos os rotulos na mesma linha de base, com ou sem icone */ .e-grid .e-toolbar .e-toolbar-item { display: flex !important; align-items: center !important; } .e-grid .e-toolbar .e-tbar-btn { background: transparent !important; color: var(--text) !important; border: none !important; border-radius: 4px !important; padding: 4px 10px !important; font-size: 13px !important; box-shadow: none !important; transition: background 0.15s !important; } .e-grid .e-toolbar .e-tbar-btn:hover, .e-grid .e-toolbar .e-tbar-btn:focus { background: rgba(0, 0, 0, 0.05) !important; color: var(--text) !important; border: none !important; } html.dark .e-grid .e-toolbar .e-tbar-btn:hover, html.dark .e-grid .e-toolbar .e-tbar-btn:focus { background: rgba(255, 255, 255, 0.08) !important; } /* Separadores que o tema desenha entre os itens da barra */ .e-grid .e-toolbar .e-toolbar-item, .e-grid .e-toolbar .e-toolbar-items { border-left: none !important; border-right: none !important; } .e-grid .e-toolbar .e-toolbar-item.e-separator { display: none !important; } .e-grid .e-toolbar .e-tbar-btn .e-btn-icon, .e-grid .e-toolbar .e-tbar-btn .e-icons { color: inherit !important; } .e-grid .e-toolbar .e-input-group, .e-grid .e-toolbar .e-input-group.e-control-wrapper { background: var(--bg-body) !important; border: 1px solid var(--border) !important; border-radius: 6px !important; } .e-grid .e-toolbar .e-input-group input { color: var(--text) !important; } /* --- 10. Scrollbar dentro do Grid --- */ .e-grid .e-gridcontent::-webkit-scrollbar { width: 8px; height: 8px; } .e-grid .e-gridcontent::-webkit-scrollbar-track { background: var(--bg-surface); } .e-grid .e-gridcontent::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } .e-grid .e-gridcontent::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* --- 11. Badge Contador de Registros --- */ .total-badge { background: rgba(var(--accent-rgb), 0.1); color: var(--accent); padding: 4px 12px; border-radius: 16px; font-size: 13px; font-weight: 500; white-space: nowrap; } /* ======================================== SYNCFUSION CHARTS - FUNDO Antes pintava o grafico de #80d52208 (um verde a 3%), que dava aquele fundo esverdeado. No ERP o grafico e transparente e herda o fundo do card. ======================================== */ .e-chart, .e-accumulationchart, .e-chart svg, .e-accumulationchart svg { background: transparent !important; border-radius: 8px !important; } .e-chart svg rect[fill="white"], .e-chart svg rect[fill="#FFFFFF"], .e-chart svg rect[fill="#ffffff"], .e-accumulationchart svg rect[fill="white"], .e-accumulationchart svg rect[fill="#FFFFFF"], .e-accumulationchart svg rect[fill="#ffffff"] { fill: transparent !important; } .e-chart .e-chart-border, .e-accumulationchart .e-chart-border { fill: transparent !important; stroke: transparent !important; } /* Chart axis labels and text */ .e-chart text, .e-accumulationchart text { fill: var(--text-muted) !important; } .e-chart .e-axis-title, .e-chart .e-axis-label { fill: var(--text-muted) !important; } .e-chart line[stroke="#b5b5b5"], .e-chart line[stroke="#EEEEEE"], .e-chart line[stroke="#eee"] { stroke: var(--border) !important; } /* ======================================== MAIN CONTENT - FULL CONTAINMENT ======================================== */ main.flex-1 { overflow: hidden !important; min-width: 0 !important; } main > .flex-1 { overflow-y: auto !important; overflow-x: hidden !important; min-width: 0 !important; } .dashboard, .page-container, .reports-page, .analytics-page, .performance-page, .satisfaction-page, .create-page, .chat-dashboard, .chat-history-page, .inbox-page { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; } .content-card, .section-card, .chart-card, .kpi-grid, .kpi-grid-3, .stats-row, .charts-row, .page-header { max-width: 100% !important; box-sizing: border-box !important; } /* ======================================== PADRÃO DE CARD DO ERP SEGLA ---------------------------------------- O ERP usa painel com raio 12px e sombra dupla suave (ver o .e-dashboardlayout .e-panel do Index.razor do Segla.Web), com o cabeçalho em 12px/300. Aplicado aqui nos contêineres equivalentes do ServiceDesk para os dois produtos terem o mesmo "peso" visual. ======================================== */ .sg-card, .stat-card, .chart-card, .dashboard-card, .e-card { border-radius: 12px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important; border: 1px solid var(--border) !important; background: var(--bg-card) !important; overflow: hidden; } html.dark .sg-card, html.dark .stat-card, html.dark .chart-card, html.dark .dashboard-card, html.dark .e-card { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25) !important; } /* Cabeçalho de card: leve, como no ERP */ .sg-card-header, .chart-card .card-header, .e-card .e-card-header-title { font-size: 12px !important; font-weight: 300 !important; line-height: 16px; } /* Grid do Syncfusion: plano, sem fundo próprio (o ERP zera o branco do tema) */ body .e-grid, body .e-grid .e-gridheader, body .e-grid .e-gridcontent { background: transparent !important; } body .e-toolbar { background: transparent !important; } /* Appbar/toolbar sem raio nem sombra — o "flat" do ERP */ body .e-appbar { border-radius: 0 !important; box-shadow: none !important; } /* Grid — redimensionamento: sem regra de largura aqui de proposito (ver acima) */ /* O scroller horizontal e o .e-content (o .e-gridcontent segue hidden de proposito) */ .e-grid .e-gridcontent .e-content { overflow: auto !important; } /* Cabecalho acompanha a rolagem do conteudo */ .e-grid .e-gridheader { overflow: hidden !important; } /* Alca e linha-guia do resize: estilizadas pelo proprio tema Syncfusion. NAO redefinir display/width aqui — durante o arraste o componente aplica a classe e-rcursor em elementos da tabela, e um `display:block;width:4px` forcado colapsava as celulas (cabecalhos empilhados, linhas sumindo). */ /* Só a linha-guia do arraste fica azul — o cabeçalho não pode ficar pintado depois de soltar (era o que acontecia ao incluir .e-headercell.e-resized). */ .e-grid .e-rhelper { background-color: var(--accent) !important; } /* Celula corta com reticencias em vez de esconder metade do conteudo */ .e-grid .e-rowcell { overflow: hidden; text-overflow: ellipsis; } /* ======================================== GRID — RECEITA DO ERP SEGLA ---------------------------------------- Copiado do app.css do Segla.Web (secao "Grid — sem bordas, cabecalho minimalista"): fonte 12px, NENHUMA borda, toolbar e area de agrupamento transparentes. O cabecalho fica com o tom do proprio Fluent 2 — sem caixa alta e sem letter-spacing, que era o que mais destoava do ERP. Este bloco vem depois das regras antigas de proposito, para vencer no empate de especificidade. ======================================== */ .e-grid .e-rowcell, .e-grid .e-headercell, .e-grid .e-headercelldiv, .e-grid .e-summarycell { font-size: 12px !important; } /* Cabecalho como no ERP: texto normal, sem caixa alta */ .e-grid .e-headercell, .e-grid .e-headercelldiv, .e-grid .e-headertext { text-transform: none !important; letter-spacing: normal !important; font-weight: 600 !important; } /* Sem bordas — o grid se define pelo espacamento, nao por linhas */ .e-grid, .e-grid .e-gridheader, .e-grid .e-gridcontent, .e-grid .e-gridfooter, .e-grid .e-toolbar, .e-grid .e-groupdroparea, .e-grid .e-gridheader .e-headercelldiv, .e-grid .e-gridheader .e-headercontent, .e-grid .e-gridheader .e-table { border: none !important; } .e-grid .e-headercell { border-left: none !important; border-right: none !important; border-top: none !important; padding: 6px 10px !important; } /* Area de agrupamento e toolbar planas */ body .e-grid .e-groupdroparea, body .e-grid .e-toolbar, body .e-toolbar { background: transparent !important; } /* Fundos transparentes (o cartao ao redor ja da o fundo) */ body .e-grid .e-table, body .e-grid .e-content, body .e-grid .e-gridcontent, body .e-grid .e-gridfooter { background-color: transparent !important; } /* ======================================== GRID — CELULA COM TEMPLATE DE DUAS LINHAS ---------------------------------------- Quando RowHeight e menor que o padrao do tema, o Syncfusion marca o grid com .e-grid-min-height e o Fluent 2 zera o line-height das celulas. Nas telas em que a celula tem template (avatar + nome + subtitulo), isso imprime as duas linhas uma EM CIMA da outra — era o "Segla Sistemas" sobreposto em Empresas. ======================================== */ .e-grid.e-grid-min-height .e-rowcell, .e-grid.e-grid-min-height .e-rowcell * { line-height: normal !important; } /* ── Badges dentro do grid ── O tema Fluent 2 ja da 12px de padding vertical na celula; qualquer conteudo mais alto que o texto (20px) estica a linha inteira. Chips e badges do grid ficam com a altura da linha de texto — fora do grid seguem no tamanho normal. */ .e-grid .e-rowcell .sit-badge, .e-grid .e-rowcell .soft-badge, .e-grid .e-rowcell .status-badge, .e-grid .e-rowcell .group-badge, .e-grid .e-rowcell .sla-indicator, .e-grid .e-rowcell .origem-badge, .e-grid .e-rowcell .due-date, .e-grid .e-rowcell .date-cell, .e-grid .e-rowcell .no-sla { padding: 1px 8px !important; font-size: 11px !important; line-height: 18px !important; border-radius: 12px !important; } .e-grid .e-rowcell .requester-avatar, .e-grid .e-rowcell .agent-avatar { width: 20px !important; height: 20px !important; font-size: 10px !important; } /* ════════════════════════════════════════════════════════════════════════════ LOADER SEGLA — aneis concentricos girando em torno do "S" Mesmo visual do ERP (app.css do Segla.Web, secao sg-app-loader). Usado em todo carregamento: modal de reconexao, carga de pagina e overlay global. ════════════════════════════════════════════════════════════════════════════ */ .sd-loader-visual { position: relative; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; } .sd-loader-ring-outer { position: absolute; inset: 0; border-radius: 50%; border: 4px solid transparent; border-top-color: #0066FF; border-bottom-color: rgba(0, 102, 255, 0.3); animation: sd-loader-spin 1.6s linear infinite; } .sd-loader-ring-inner { position: absolute; inset: 12px; border-radius: 50%; border: 4px solid transparent; border-left-color: #0099FF; border-right-color: rgba(0, 153, 255, 0.3); animation: sd-loader-spin 1.9s linear infinite reverse; } .sd-loader-ring-core { position: absolute; inset: 24px; border-radius: 50%; border: 3px solid transparent; border-top-color: #00B2FF; border-left-color: rgba(0, 178, 255, 0.4); animation: sd-loader-spin 2.4s linear infinite; } .sd-loader-logo { width: 76px; height: 76px; object-fit: contain; position: relative; z-index: 2; background: transparent; filter: drop-shadow(0 3px 8px rgba(0, 102, 255, 0.22)); animation: sd-loader-pulse 2.4s ease-in-out infinite; } @keyframes sd-loader-spin { to { transform: rotate(360deg); } } @keyframes sd-loader-pulse { 0%, 100% { opacity: 0.92; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } /* Versao compacta para carregamentos dentro da pagina */ .sd-loader-visual.sd-loader-sm { width: 84px; height: 84px; } .sd-loader-visual.sd-loader-sm .sd-loader-ring-inner { inset: 9px; } .sd-loader-visual.sd-loader-sm .sd-loader-ring-core { inset: 18px; } .sd-loader-visual.sd-loader-sm .sd-loader-logo { width: 50px; height: 50px; } /* Bloco de carregamento de pagina (loader + legenda). Fica centrado na TELA, nao dentro de um bloco de altura fixa — antes usava min-height:400px e o loader terminava colado no topo da area util. Fundo transparente: enquanto carrega nao ha conteudo atras para cobrir. */ .sd-page-loading { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; pointer-events: none; } /* Variante no fluxo, para carregamentos de um bloco dentro da pagina */ .sd-page-loading.sd-page-loading-inline { position: static; min-height: 220px; pointer-events: auto; } .sd-page-loading span { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0.02em; animation: sd-text-pulse 2s ease-in-out infinite; } @keyframes sd-text-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* ── Modal de reconexao do Blazor (deploy/restart do servidor) ── O Blazor liga as classes components-reconnect-* neste elemento. */ #components-reconnect-modal { display: none; position: fixed; inset: 0; z-index: 100000; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } #components-reconnect-modal.components-reconnect-show, #components-reconnect-modal.components-reconnect-failed, #components-reconnect-modal.components-reconnect-rejected { display: flex; } .sd-reconnect-card { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--bg-surface); color: var(--text); border: 1px solid var(--border); border-radius: 16px; padding: 32px 40px; text-align: center; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28); max-width: 380px; } .sd-reconnect-title { font-size: 1rem; font-weight: 700; margin-top: 6px; } .sd-reconnect-text { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; } /* ── Sugestoes da busca da barra superior ── Aparecem a partir da 3a letra; clicar leva direto ao ticket. Mesmo padrao do ERP. Overlay/posicionamento ficam aqui (fora do .razor.css) porque o dropdown escapa do fluxo do cabecalho. */ .sd-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1200; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14); overflow: hidden; max-height: 420px; overflow-y: auto; } .sd-suggest-backdrop { position: fixed; inset: 0; z-index: 1100; } .sd-suggest-head { padding: 9px 14px 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); } .sd-suggest-info { padding: 14px; font-size: 13px; color: var(--text-muted); text-align: center; } .sd-suggest-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 14px; border: none; background: transparent; text-align: left; cursor: pointer; font-family: inherit; border-bottom: 1px solid var(--border); } .sd-suggest-item:last-of-type { border-bottom: none; } .sd-suggest-item:hover { background: var(--bg-hover); } .sd-suggest-num { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--accent); background: rgba(var(--accent-rgb), 0.1); padding: 2px 7px; border-radius: 5px; } .sd-suggest-txt { flex: 1; min-width: 0; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sd-suggest-meta { flex-shrink: 0; font-size: 11px; color: var(--text-muted); } .sd-suggest-arrow { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-muted); } .sd-suggest-all { display: block; width: 100%; padding: 10px 14px; border: none; border-top: 1px solid var(--border); background: var(--bg-body); color: var(--accent); font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; text-align: center; } .sd-suggest-all:hover { background: var(--bg-hover); } /* ── Botao "Escolha as colunas" no padrao do ERP ── 1) o Syncfusion insere um .e-spacer antes dele, que o joga para a direita; sem o espacador ele fica na fila dos outros botoes, a esquerda. 2) o tema traz um chevron a direita do rotulo — trocado pelo icone de tabela + engrenagem do ERP (mask-image, entao herda a cor do texto). */ .e-grid .e-toolbar .e-toolbar-item.e-spacer { display: none !important; } .e-grid .e-toolbar .e-ccdiv .e-tbar-btn { display: inline-flex !important; align-items: center !important; flex-direction: row !important; } .e-grid .e-toolbar .e-ccdiv .e-tbar-btn .e-columnchooser-btn { order: -1; margin: 0 6px 0 0 !important; width: 17px !important; min-width: 17px !important; height: 17px !important; flex: 0 0 17px !important; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272.5%27%20y%3D%272.5%27%20width%3D%2714%27%20height%3D%2714%27%20rx%3D%271.6%27%2F%3E%3Cpath%20d%3D%27M2.5%209.5h14M9.5%202.5v14%27%2F%3E%3Ccircle%20cx%3D%2718.4%27%20cy%3D%2718.4%27%20r%3D%272.4%27%2F%3E%3Cpath%20d%3D%27M18.4%2014.2v1.3M18.4%2021.3v1.3M14.2%2018.4h1.3M21.3%2018.4h1.3%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272.5%27%20y%3D%272.5%27%20width%3D%2714%27%20height%3D%2714%27%20rx%3D%271.6%27%2F%3E%3Cpath%20d%3D%27M2.5%209.5h14M9.5%202.5v14%27%2F%3E%3Ccircle%20cx%3D%2718.4%27%20cy%3D%2718.4%27%20r%3D%272.4%27%2F%3E%3Cpath%20d%3D%27M18.4%2014.2v1.3M18.4%2021.3v1.3M14.2%2018.4h1.3M21.3%2018.4h1.3%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain; } .e-grid .e-toolbar .e-ccdiv .e-tbar-btn .e-columnchooser-btn::before { content: none !important; } /* ════════════════════════════════════════════════════════════════════════════ FORMULÁRIOS — PADRÃO DO ERP SEGLA ---------------------------------------------------------------------------- O ERP usa um desenho enxuto (Segla.Web, classes sgdlg-*): cabecalho discreto com titulo leve de 16px e subtitulo de 11px, cartoes de borda fina sem sombra, rotulos pequenos em caixa alta e acoes flat com icone — nada de titulo grande nem de botao colorido cheio. As telas declaram essas mesmas classes no proprio .razor, entao aqui elas vem prefixadas com `body` (especificidade 0,1,1) para vencer a versao local sem precisar de !important nem editar 30 arquivos. Ajustes especificos de cada tela continuam valendo quando usam seletor mais especifico. ════════════════════════════════════════════════════════════════════════════ */ /* ── Cabecalho da tela ── */ body .page-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } body .page-title { font-size: 16px; font-weight: 400; color: var(--text); line-height: 1.25; margin: 0 0 2px 0; } body .page-subtitle { font-size: 11px; color: var(--text-muted); opacity: 0.75; margin: 0; } /* ── Cartoes ── */ body .form-card, body .content-card, body .detail-card, body .settings-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: none; } /* ── Campos ── */ body .form-group { margin-bottom: 14px; } body .form-label { display: block; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 5px; } body .form-input, body .form-select, body .form-control, body .form-textarea { width: 100%; min-height: 34px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-surface); color: var(--text); font-family: inherit; font-size: 0.82rem; outline: none; transition: border-color 0.15s, box-shadow 0.15s; box-sizing: border-box; } body .form-input:focus, body .form-select:focus, body .form-control:focus, body .form-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12); } body .form-hint { font-size: 0.68rem; color: var(--text-muted); opacity: 0.8; margin-top: 4px; } body .form-row { display: flex; gap: 14px; flex-wrap: wrap; } body .form-row > .form-group { flex: 1 1 220px; min-width: 0; } /* ── Acoes: flat com icone, como no ERP (sgdlg-action-save/cancel) ── */ body .btn-primary, body .btn-secondary, body .btn-danger, body .btn-success { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid transparent; font-family: inherit; font-size: 0.8rem; font-weight: 500; line-height: 1; cursor: pointer; box-shadow: none; transition: background 0.15s, border-color 0.15s, color 0.15s; } body .btn-primary { background: var(--accent); color: #fff; } body .btn-primary:hover { filter: brightness(1.08); } body .btn-secondary { background: transparent; color: var(--text); border-color: var(--border); } body .btn-secondary:hover { background: var(--bg-hover); } body .btn-danger { background: transparent; color: #dc2626; border-color: rgba(220, 38, 38, 0.35); } body .btn-danger:hover { background: rgba(220, 38, 38, 0.08); } body .btn-success { background: transparent; color: #16a34a; border-color: rgba(22, 163, 74, 0.35); } body .btn-success:hover { background: rgba(22, 163, 74, 0.08); } body .btn-primary svg, body .btn-secondary svg, body .btn-danger svg, body .btn-success svg { width: 15px; height: 15px; } /* ── Barra de acoes do formulario ── */ body .form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--border); } /* ── Titulo de secao dentro do formulario ── */ body .section-title { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 0 0 10px 0; } /* ── Mesmo padrao para os "dialetos" de cada tela ── Alem das classes compartilhadas (page-*, form-*), varias telas tem nomes proprios para as mesmas coisas: dialogos (dialog-*, modal-*), o formulario de novo ticket (create-*, field-*) e as telas de detalhe (detail-*, info-*). Todos passam a seguir a mesma escala do ERP. */ /* Titulos de tela / dialogo / secao */ body .create-title, body .dialog-title, body .modal-title, body .ticket-title { font-size: 16px; font-weight: 400; color: var(--text); line-height: 1.25; margin: 0 0 2px 0; } body .create-subtitle, body .dialog-subtitle, body .modal-subtitle { font-size: 11px; color: var(--text-muted); opacity: 0.75; margin: 0; } body .form-section-title, body .info-title, body .card-title { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 0 0 10px 0; } /* Rotulos */ body .field-label, body .info-label, body .detail-label, body .setting-label { display: block; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 5px; } /* Campos do formulario de novo ticket e afins */ body .field { margin-bottom: 14px; } body .field-row { display: flex; gap: 14px; flex-wrap: wrap; } body .field-row > .field { flex: 1 1 220px; min-width: 0; } body .field input[type="text"], body .field input[type="email"], body .field input[type="number"], body .field select, body .field textarea { min-height: 34px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.82rem; font-family: inherit; } /* Cabecalhos de tela/dialogo com o mesmo respiro do padrao */ body .create-header, body .dialog-header, body .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } /* Cartoes das telas de detalhe */ body .info-card, body .sidebar-card, body .ticket-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: none; } /* ── Botoes com nome proprio, na mesma escala do padrao ── btn-submit/cancel/record/solve/... existem nas telas de ticket e chat; todos passam a ter a mesma altura e peso dos btn-primary/secondary. As cores de cada um continuam vindo da regra da propria tela. */ body .btn-submit, body .btn-cancel, body .btn-record, body .btn-stop, body .btn-stop-recording, body .btn-solve, body .btn-close-ticket, body .btn-cancel-ticket, body .btn-transfer, body .btn-action, body .btn-info, body .btn-warning { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 6px; font-family: inherit; font-size: 0.8rem; font-weight: 500; line-height: 1; cursor: pointer; box-shadow: none; } body .btn-submit svg, body .btn-cancel svg, body .btn-record svg, body .btn-solve svg, body .btn-close-ticket svg, body .btn-cancel-ticket svg, body .btn-action svg { width: 15px; height: 15px; } /* Acoes de card lateral ocupam a largura do card, mas na altura do padrao */ body .actions-card .btn-solve, body .actions-card .btn-close-ticket, body .actions-card .btn-cancel-ticket, body .actions-card .btn-action, body .actions-card .btn-primary, body .actions-card .btn-secondary, body .record-card .btn-record, body .record-card .btn-stop-recording { width: 100%; } /* As acoes da barra lateral ficam empilhadas com respiro entre elas */ body .actions-card .e-card-content, body .record-card .e-card-content { display: flex; flex-direction: column; gap: 8px; } /* Botao so com icone (editar/excluir nas grids e cards) */ body .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer; box-shadow: none; } body .btn-icon:hover { background: var(--bg-hover); color: var(--accent); border-color: var(--accent); } /* Icone de fonte (Bootstrap Icons) dentro de botao acompanha o texto — sem isso regras como ".empty-state i { font-size: 3rem }" vazam para o botao. */ body button i[class*="bi-"], body .btn-primary i, body .btn-secondary i, body .btn-danger i, body .btn-success i, body .btn-submit i, body .btn-cancel i, body .btn-action i { font-size: 0.95rem; line-height: 1; } /* ════════════════════════════════════════════════════════════════════════════ BOTÕES FLAT — cor apenas na linha e no texto ---------------------------------------------------------------------------- Como no ERP: nenhum botao tem fundo preenchido. A cor identifica a acao pela borda e pelo rotulo; o preenchimento so aparece no hover, bem diluido. Vem depois dos blocos anteriores de proposito — no empate de especificidade, a ultima regra vence. ════════════════════════════════════════════════════════════════════════════ */ body .btn-primary, body .btn-secondary, body .btn-danger, body .btn-success, body .btn-info, body .btn-warning, body .btn-submit, body .btn-cancel, body .btn-record, body .btn-stop, body .btn-stop-recording, body .btn-solve, body .btn-close-ticket, body .btn-cancel-ticket, body .btn-transfer, body .btn-action { background: transparent; border: 1px solid currentColor; box-shadow: none; font-weight: 500; } /* Azul — acao principal */ body .btn-primary, body .btn-submit, body .btn-info, body .btn-close-ticket, body .btn-transfer, body .btn-action { color: var(--accent); } body .btn-primary:hover, body .btn-submit:hover, body .btn-info:hover, body .btn-close-ticket:hover, body .btn-transfer:hover, body .btn-action:hover { background: rgba(var(--accent-rgb), 0.08); filter: none; } /* Neutro — acao secundaria / cancelar */ body .btn-secondary, body .btn-cancel { color: var(--text-muted); border-color: var(--border-strong, var(--border)); } body .btn-secondary:hover, body .btn-cancel:hover { background: var(--bg-hover); color: var(--text); } /* Verde — conclusao */ body .btn-success, body .btn-solve { color: #16a34a; } body .btn-success:hover, body .btn-solve:hover { background: rgba(22, 163, 74, 0.08); } /* Vermelho — destrutivo / gravacao */ body .btn-danger, body .btn-cancel-ticket, body .btn-record, body .btn-stop, body .btn-stop-recording { color: #dc2626; } body .btn-danger:hover, body .btn-cancel-ticket:hover, body .btn-record:hover, body .btn-stop:hover, body .btn-stop-recording:hover { background: rgba(220, 38, 38, 0.08); } /* Ambar — atencao */ body .btn-warning { color: #d97706; } body .btn-warning:hover { background: rgba(217, 119, 6, 0.08); } /* Icones herdam a cor do rotulo */ body .btn-primary svg, body .btn-secondary svg, body .btn-danger svg, body .btn-success svg, body .btn-submit svg, body .btn-cancel svg, body .btn-record svg, body .btn-solve svg, body .btn-close-ticket svg, body .btn-cancel-ticket svg, body .btn-action svg { stroke: currentColor; } body .btn-primary:disabled, body .btn-secondary:disabled, body .btn-submit:disabled, body .btn-solve:disabled, body .btn-close-ticket:disabled { opacity: 0.5; cursor: not-allowed; } /* ════════════════════════════════════════════════════════════════════════════ BADGES — padrão "soft" do ERP ---------------------------------------------------------------------------- O ERP (.sg-rec-badge) usa fundo bem claro, texto e borda na cor da situacao — nada de pilula de cor chapada. A cor de cada badge chega pela variavel --c (definida no proprio elemento, vinda do cadastro de status/prioridade); sem ela, cai no cinza neutro. ════════════════════════════════════════════════════════════════════════════ */ body .status-badge, body .priority-badge, body .category-badge, body .soft-badge, body .section-badge, body .origem-badge, body .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 500; line-height: 1.5; white-space: nowrap; color: var(--c, var(--text-muted)); background: color-mix(in srgb, var(--c, #64748b) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c, #64748b) 32%, transparent); } /* Ponto colorido opcional antes do rotulo (usado no dashboard) */ body .soft-badge::before, body .status-badge.with-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* No grid as badges seguem a altura da linha */ body .e-grid .e-rowcell .status-badge, body .e-grid .e-rowcell .priority-badge, body .e-grid .e-rowcell .soft-badge, body .e-grid .e-rowcell .badge { padding: 1px 8px !important; font-size: 11px !important; line-height: 18px !important; } /* ════════════════════════════════════════════════════════════════════════════ CARTÕES SYNCFUSION (SfCard) — mesmo desenho dos cartões do padrão ---------------------------------------------------------------------------- As telas de detalhe montam os blocos com SfCard. O tema traz sombra e um titulo grande; aqui eles ficam com a borda fina do padrao e o titulo vira um rotulo discreto em caixa alta, como as secoes do ERP. ════════════════════════════════════════════════════════════════════════════ */ body .e-card { border: 1px solid var(--border) !important; border-radius: 10px !important; box-shadow: none !important; background: var(--bg-surface) !important; } body .e-card .e-card-header { padding: 12px 16px 0 16px !important; } body .e-card .e-card-header .e-card-header-caption .e-card-title, body .e-card .e-card-header .e-card-header-title { font-size: 0.68rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; color: var(--text-muted) !important; line-height: 1.4 !important; } body .e-card .e-card-content { padding: 12px 16px 16px 16px !important; font-size: 0.85rem; } /* Lista de propriedades (Status, Prioridade, Categoria...) da barra lateral */ body .detail-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); } body .detail-item:last-child { border-bottom: none; } body .detail-item .label { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); white-space: nowrap; } body .detail-item > span:last-child, body .detail-item .value { font-size: 0.82rem; color: var(--text); text-align: right; min-width: 0; overflow-wrap: anywhere; } /* Coluna principal x barra lateral com respiro menor */ body .ticket-content { display: flex; gap: 16px; align-items: flex-start; } body .main-content > .e-card + .e-card, body .sidebar-content > .e-card + .e-card { margin-top: 12px !important; } /* Conversas */ body .conversation-item { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-body); } body .conversation-item + .conversation-item { margin-top: 8px; } body .conversation-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 0.78rem; } body .conversation-time { font-size: 0.68rem; color: var(--text-muted); } body .conversation-body { font-size: 0.85rem; line-height: 1.55; } /* Nota interna se distingue por uma faixa ambar, nao por fundo chapado */ body .conversation-item.internal { border-left: 3px solid #d97706; background: rgba(217, 119, 6, 0.04); } body .conversation-item.agent { border-left: 3px solid var(--accent); } /* Identificacao do chamado no primeiro cartao da tela de detalhes */ body .ticket-ident { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } body .ticket-num { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: var(--accent); } body .ticket-subject { margin: 0 0 10px 0; font-size: 15px; font-weight: 500; color: var(--text); line-height: 1.35; }