/* FontAwesome font-face fix: CSS is at css/, fonts are at ../fonts/ */ @font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.0.3'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } /* Reset mínimo pós-bootstrap-removal */ *, *::before, *::after { box-sizing: border-box; } img { max-width: 100%; } table { border-collapse: collapse; } /* ORA Design System — Admin Panel Tokens + structural components. Light theme active via data-theme="light" on . */ /* ===== TOKENS ===== */ :root { --brand-navy-deep: #101140; --brand-navy: #172163; --brand-indigo: #202E83; --brand-blue: #3989BF; --brand-blue-light: #C2E3FF; --brand-yellow: #FFCC00; /* Dark defaults */ --bg: #0A0B1F; --bg-elev: #10122E; --card: #151633; --card-hover: #1B1D40; --surface: #151633; --surface2: #1B1D40; --border: #252748; --border-strong: #3A3D66; --text: #F2F4FF; --text-muted: #9BA0C4; --text-dim: #6C70A0; --accent: #3989BF; --accent-soft: rgba(57, 137, 191, 0.18); --accent-bright: #5CB3E8; --accent-deep: #202E83; --positive: #3FD39A; --negative: #FF6B7A; --warn: #FFCC00; --radius: 14px; --radius-sm: 10px; --radius-xs: 6px; --pad-page: 28px; --pad-card: 20px; --gap: 16px; } /* OraDS React root containers */ #ora-topbar-root { position: sticky; top: 0; z-index: 100; } #ora-page-header-root { margin-bottom: 20px; } html[data-theme="light"] { --bg: #F4F6FB; --bg-elev: #EDF0F8; --card: #FFFFFF; --card-hover: #F8FAFF; --surface: #F1F4FB; --surface2: #EDF0F8; --border: #E2E5EF; --border-strong: #CFD3E3; --text: #101140; --text-muted: #4D4D5C; --text-dim: #8A90AB; --accent: #202E83; --accent-soft: rgba(32, 46, 131, 0.10); --accent-bright: #3989BF; --accent-deep: #172163; --positive: #15A36E; --negative: #D8404F; --warn: #B8860B; } /* ===== BASE ===== */ *, *::before, *::after { box-sizing: border-box; } /* overflow-x:hidden so no body nao bastou pra travar o scroll horizontal fantasma do breakout de 100vw do kanban — precisa tambem no html (layout legado em tabela pode nao propagar overflow do body pro viewport). */ html { overflow-x: hidden; } body { background: var(--bg) !important; color: var(--text) !important; font-family: 'Segoe UI', system-ui, -apple-system, 'Roboto', sans-serif !important; font-size: 14.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; margin: 0 !important; padding: 0 !important; padding-bottom: 50px !important; /* .ora-kb-scrollwrap usa breakout de 100vw (kanban full-bleed); vw mede a viewport incluindo a scrollbar, mas o fluxo normal do documento usa a largura sem scrollbar — a diferenca (alguns px) cria scroll horizontal fantasma na pagina. Corta esse residuo sem afetar o scroll interno do kanban (.ora-kanban tem seu proprio overflow-x:auto, nao depende disso). */ overflow-x: hidden; } a { color: var(--accent-bright); } a:hover { color: var(--accent); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); } /* ===== APP SHELL ===== */ .ora-app { min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; } /* ===== TOPBAR ===== */ .ora-topbar { background: var(--bg-elev); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 4px rgba(0,0,0,0.06); } .ora-topbar-inner { display: flex; align-items: center; gap: 12px; padding: 0 var(--pad-page); height: 52px; max-width: 1600px; margin: 0 auto; } .ora-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 700; font-size: 14px; letter-spacing: -0.01em; white-space: nowrap; flex-shrink: 0; } .ora-brand:hover { color: var(--text); text-decoration: none; } .ora-brand:hover .ora-brand-name { color: var(--accent-bright); } .ora-brand-logo { height: 28px; width: auto; display: block; object-fit: contain; } .ora-brand-divider { display: inline-block; width: 1px; height: 20px; background: var(--border); flex-shrink: 0; } .ora-brand-sub { font-size: 10px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.12em; transition: color 0.12s; } .ora-brand:hover .ora-brand-sub { color: var(--accent-bright); } /* legacy — kept for pages that still render the text-only fallback */ .ora-brand-name { display: flex; flex-direction: column; gap: 0; line-height: 1.1; color: var(--text); transition: color 0.12s; } .ora-brand-name small { font-size: 9px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.1em; } .ora-topbar-grow { flex: 1; min-width: 0; } .ora-nav { display: flex; align-items: center; gap: 1px; overflow: visible; flex: 1; } /* Dropdown nav groups */ .ora-nav-dropdown { position: relative; } .ora-nav-dropdown-menu { position: absolute; top: 100%; left: 0; background: var(--card); border: 1px solid var(--border-strong, var(--border)); border-radius: var(--radius-sm, 8px); box-shadow: 0 4px 20px rgba(0,0,0,.35); min-width: 190px; padding: 6px 0; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity .15s, transform .15s; z-index: 500; } .ora-nav-dropdown-menu::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; } .ora-nav-dropdown:hover > .ora-nav-dropdown-menu, .ora-nav-dropdown:focus-within > .ora-nav-dropdown-menu { opacity: 1; pointer-events: all; transform: translateY(0); } .ora-nav-dropdown-menu a { display: flex; align-items: center; padding: 8px 16px; color: var(--text); text-decoration: none; font-size: 13px; font-weight: 500; transition: background .1s, color .1s; white-space: nowrap; } .ora-nav-dropdown-menu a:hover { background: var(--bg, #f5f5f5); color: var(--accent); text-decoration: none; } .ora-nav-dropdown-menu a.active { color: var(--accent); font-weight: 700; } .ora-nav-dropdown-menu .ora-nav-sep { height: 1px; background: var(--border); margin: 4px 8px; } .ora-nav-chevron { font-size: 8px; opacity: .45; margin-left: 2px; transition: transform .15s; display: inline-block; } .ora-nav-dropdown:hover .ora-nav-chevron { transform: rotate(180deg); } .ora-nav-item { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: var(--radius-xs); font-size: 11.5px; font-weight: 500; color: var(--text-muted); text-decoration: none; white-space: nowrap; transition: background 0.12s, color 0.12s; border: 0; background: transparent; cursor: pointer; font-family: inherit; line-height: 1.2; } .ora-nav-item:hover { background: var(--card); color: var(--text); text-decoration: none; } .ora-nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 700; } .ora-nav-item.danger:hover { background: color-mix(in oklab, var(--negative) 12%, transparent); color: var(--negative); } .ora-topbar-sep { display: inline-block; width: 1px; height: 18px; background: var(--border); margin: 0 4px; flex-shrink: 0; } .ora-topbar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } /* ===== BUTTONS ===== */ .ora-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 15px; border-radius: var(--radius-sm); font: inherit; font-size: 13px; font-weight: 600; border: 1.5px solid transparent; cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; white-space: nowrap; text-decoration: none; line-height: 1; } .ora-btn:hover { text-decoration: none; } .ora-btn-primary { background: var(--accent); color: #fff !important; border-color: var(--accent); } .ora-btn-primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); color: #fff; } .ora-btn-ghost { background: transparent; color: var(--text-muted) !important; border-color: var(--border); } .ora-btn-ghost:hover { background: var(--card-hover); color: var(--text) !important; border-color: var(--border-strong); } .ora-btn-danger { background: color-mix(in oklab, var(--negative) 12%, transparent); color: var(--negative) !important; border-color: color-mix(in oklab, var(--negative) 28%, transparent); } .ora-btn-danger:hover { background: color-mix(in oklab, var(--negative) 22%, transparent); } .ora-btn-sm { padding: 5px 10px; font-size: 12px; } .ora-btn-xs { padding: 3px 8px; font-size: 11px; border-radius: var(--radius-xs); } .ora-ai-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 12px; border: 1.5px dashed color-mix(in oklab, #8B5CF6 45%, transparent); border-radius: var(--radius-sm); background: color-mix(in oklab, #8B5CF6 8%, transparent); } .ora-ai-box-label { font-size: 12px; font-weight: 700; color: #8B5CF6; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } .ora-btn-ai { background: #8B5CF6; color: #fff !important; border-color: #8B5CF6; } .ora-btn-ai:hover { background: #7C3AED; border-color: #7C3AED; color: #fff !important; } .ora-btn-ai-ghost { background: transparent; color: #8B5CF6 !important; border-color: color-mix(in oklab, #8B5CF6 50%, transparent); } .ora-btn-ai-ghost:hover { background: color-mix(in oklab, #8B5CF6 14%, transparent); color: #7C3AED !important; border-color: #8B5CF6; } .ora-private-reply-option { margin-top: 8px; padding: 8px 10px; border: 1px solid #f0b429; border-radius: 6px; background: #fff8db; color: #4a3410; } .ora-private-reply-option img { width: 16px; height: 16px; margin-right: 4px; vertical-align: text-bottom; } /* ===== MAIN CONTENT AREA ===== */ .ora-main { flex: 1; padding: 20px var(--pad-page) 40px; max-width: 1600px; margin: 0 auto; width: 100%; } /* ===== PAGE HEADER ===== */ .ora-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--border); } .ora-page-label { font-size: 10.5px; color: var(--accent-bright); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; margin-bottom: 3px; } .ora-page-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--text); line-height: 1.2; } .ora-page-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* ===== CARDS ===== */ .ora-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: var(--gap); } .ora-card-head { display: flex; align-items: center; gap: 12px; padding: 14px var(--pad-card); border-bottom: 1px solid var(--border); background: var(--bg-elev); } .ora-card-title { font-size: 13.5px; font-weight: 700; color: var(--text); flex: 1; } .ora-card-body { padding: var(--pad-card); } /* ===== TABLES ===== */ .ora-table-wrap { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .ora-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; } .ora-table thead th { text-align: left; background: var(--bg-elev); color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 10px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; } .ora-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; } .ora-table tbody tr:last-child td { border-bottom: 0; } .ora-table tbody tr:hover { background: var(--card-hover); } /* ===== STATUS PILLS ===== */ .ora-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .ora-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; } .ora-pill-open { background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 28%, transparent); } .ora-pill-wait { background: color-mix(in oklab, var(--warn) 14%, transparent); color: var(--warn); border: 1px solid color-mix(in oklab, var(--warn) 28%, transparent); } .ora-pill-closed { background: color-mix(in oklab, var(--positive) 12%, transparent); color: var(--positive); border: 1px solid color-mix(in oklab, var(--positive) 26%, transparent); } .ora-pill-closed .ora-pill-dot { box-shadow: none; } /* ===== NOTIFICATION BANNER ===== */ .ora-notice { display: flex; align-items: flex-start; gap: 12px; margin: 12px 0; padding: 12px 16px; background: color-mix(in oklab, var(--warn) 10%, var(--card)); border: 1px solid color-mix(in oklab, var(--warn) 28%, transparent); border-radius: var(--radius-sm); font-size: 13px; } .ora-notice-body { flex: 1; } .ora-notice-title { font-weight: 700; margin-bottom: 4px; } .ora-notice-close { background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: 16px; line-height: 1; padding: 0; flex-shrink: 0; transition: color 0.12s; } .ora-notice-close:hover { color: var(--text); } /* ===== BOTTOM BAR (Chamados Ativos) ===== */ .ora-bottombar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: var(--brand-navy-deep); border-top: 2px solid var(--brand-yellow); display: flex; align-items: center; gap: 6px; padding: 5px var(--pad-page); min-height: 40px; } .ora-bottombar-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: rgba(255,255,255,0.75); text-decoration: none; padding: 3px 8px; border-radius: var(--radius-xs); transition: background 0.12s, color 0.12s; white-space: nowrap; } .ora-bottombar-item:hover { background: rgba(255,255,255,0.1); color: #fff; text-decoration: none; } .ora-bottombar-grow { flex: 1; display: flex; align-items: center; gap: 8px; overflow: hidden; } .ora-bottombar-close { background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.5); font-size: 16px; padding: 2px 6px; line-height: 1; border-radius: var(--radius-xs); transition: color 0.12s; } .ora-bottombar-close:hover { color: #fff; } /* Counter badge */ .ora-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--brand-yellow); color: var(--brand-navy-deep); font-size: 10px; font-weight: 700; } /* Ticker (new tickets) */ #js-news li { color: rgba(255,255,255,0.85); font-size: 12px; } #js-news a { color: var(--brand-blue-light); } /* ===== ACTIVE TICKETS POPUP ===== */ #chamadosativos { position: absolute !important; bottom: 44px; left: 0; width: 580px; max-height: 260px; overflow: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm) var(--radius-sm) 0 0; box-shadow: 0 -8px 24px rgba(0,0,0,0.12); display: none; padding: 0; } #chamadosativos h3 { font-size: 13px; font-weight: 700; color: var(--text); padding: 12px 14px 8px; margin: 0; border-bottom: 1px solid var(--border); } #chamadosativos table { width: 100%; border-collapse: collapse; font-size: 12px; } #chamadosativos table tr th, #chamadosativos table tr td { padding: 7px 10px; border-bottom: 1px solid var(--border); color: var(--text); } #chamadosativos table tr th { background: var(--bg-elev); color: var(--text-muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; } #chamadosativos table tr:hover td { background: var(--card-hover); } #chamadosativos table a { color: var(--accent-bright); } #chamadosativos .ora-ativos-count { display: inline-block; min-width: 18px; padding: 1px 7px; margin-left: 6px; border-radius: 999px; background: var(--accent-bright); color: #fff; font-size: 11px; font-weight: 700; text-align: center; vertical-align: middle; } #chamadosativos .ora-ativos-empty { text-align: center; color: var(--text-muted); font-style: italic; padding: 16px 10px; } #chamadosativos .ora-ativos-hora { color: var(--text-muted); white-space: nowrap; } .ora-news-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; border-radius: 999px; background: var(--bg-elev); border: 1px solid var(--border); color: var(--text-muted); font-size: 12px; } .ora-news-pill-count { min-width: 16px; padding: 0 6px; border-radius: 999px; background: var(--accent-bright); color: #fff; font-size: 11px; font-weight: 700; text-align: center; } .ora-badge--ativos { margin-left: 6px; min-width: 16px; padding: 0 6px; border-radius: 999px; background: var(--accent-bright); color: #fff; font-size: 11px; font-weight: 700; } /* ===== SEARCH FORM MODERNIZATION ===== */ .ora-search-bar { display: flex; align-items: center; gap: 8px; padding: 16px var(--pad-card); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: var(--gap); } /* Override hesk_style for content area */ table.enclosing { display: none !important; } div[align="center"] > table.enclosing { display: none !important; } /* Fix Bootstrap 3 elements in light theme */ .table > thead > tr > th, .table > tbody > tr > td { color: var(--text) !important; border-color: var(--border) !important; } .table > thead > tr > th { background: var(--bg-elev) !important; color: var(--text-muted) !important; } .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--card-hover) !important; } .table-hover > tbody > tr:hover { background-color: color-mix(in oklab, var(--accent) 5%, var(--card)) !important; } .panel { background: var(--card) !important; border-color: var(--border) !important; } .panel-heading { background: var(--bg-elev) !important; border-color: var(--border) !important; color: var(--text) !important; } .panel-body { color: var(--text) !important; } .well { background: var(--bg-elev) !important; border-color: var(--border) !important; color: var(--text) !important; } .form-control { background: var(--card, #fff) !important; border-color: var(--border, #ced4da) !important; color: var(--text, #333) !important; border-radius: var(--radius-xs, 4px) !important; } .form-control:focus { border-color: var(--accent-bright, #3989BF) !important; box-shadow: 0 0 0 3px var(--accent-soft, rgba(57,137,191,0.18)) !important; } select.form-control { height: auto !important; padding: 8px 12px !important; min-height: 36px !important; line-height: 1.4 !important; -webkit-appearance: auto !important; appearance: auto !important; } .btn-default { background: var(--card) !important; border-color: var(--border) !important; color: var(--text-muted) !important; } .btn-default:hover { background: var(--card-hover) !important; color: var(--text) !important; } .btn-primary { background: var(--accent) !important; border-color: var(--accent) !important; } .btn-primary:hover { background: var(--accent-bright) !important; border-color: var(--accent-bright) !important; } .btn-success { background: var(--positive) !important; border-color: var(--positive) !important; } .btn-danger, .btn-warning { /* keep defaults */ } /* Pagination */ .pagination > li > a, .pagination > li > span { background: var(--card) !important; border-color: var(--border) !important; color: var(--accent-bright) !important; } .pagination > .active > a, .pagination > .active > span { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; } /* Alert override */ .alert { border-radius: var(--radius-sm) !important; } .alert-info { background: color-mix(in oklab, var(--accent) 10%, var(--card)) !important; border-color: color-mix(in oklab, var(--accent) 30%, transparent) !important; color: var(--accent) !important; } .alert-success { background: color-mix(in oklab, var(--positive) 10%, var(--card)) !important; border-color: color-mix(in oklab, var(--positive) 30%, transparent) !important; color: var(--positive) !important; } .alert-warning { background: color-mix(in oklab, var(--warn) 10%, var(--card)) !important; border-color: color-mix(in oklab, var(--warn) 30%, transparent) !important; color: var(--warn) !important; } .alert-danger { background: color-mix(in oklab, var(--negative) 10%, var(--card)) !important; border-color: color-mix(in oklab, var(--negative) 30%, transparent) !important; color: var(--negative) !important; } /* Dropdown */ .dropdown-menu { background: var(--card) !important; border-color: var(--border) !important; border-radius: var(--radius-sm) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important; } .dropdown-menu > li > a { color: var(--text) !important; } .dropdown-menu > li > a:hover { background: var(--card-hover) !important; color: var(--text) !important; } /* Nav/Tabs override */ .nav-tabs { border-color: var(--border) !important; } .nav-tabs > li > a { color: var(--text-muted) !important; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover { background: var(--card) !important; border-color: var(--border) var(--border) var(--card) !important; color: var(--accent) !important; } /* Modal */ .modal-content { background: var(--card) !important; border-color: var(--border) !important; border-radius: var(--radius) !important; } .modal-header { background: var(--bg-elev) !important; border-color: var(--border) !important; color: var(--text) !important; } .modal-footer { background: var(--bg-elev) !important; border-color: var(--border) !important; } /* Hesk-specific overrides */ .ticketrow { background: var(--card) !important; } .ticketrow:hover { background: var(--card-hover) !important; } /* ===== TICKET LIST — Modern Redesign ===== */ /* ─ Meta bar (count + pager) ───────────── */ .tkt-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 0 0 14px; } .tkt-count { font-size: 12.5px; color: var(--text-muted); font-weight: 500; } .tkt-pager { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); } .tkt-pager label { white-space: nowrap; } .tkt-pager select { height: 28px; padding: 0 8px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); font-size: 12px; font-family: inherit; outline: none; } .tkt-pager select:focus { border-color: var(--accent-bright); } .tkt-pager-go { height: 28px; padding: 0 10px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--card); color: var(--text-muted); font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .12s; } .tkt-pager-go:hover { background: var(--bg-elev); color: var(--text); } .tkt-pager-nav { display: flex; align-items: center; gap: 2px; } .tkt-pager-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 28px; padding: 0 4px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--card); color: var(--text-muted); font-size: 12px; font-weight: 600; text-decoration: none !important; transition: all .12s; cursor: pointer; line-height: 1; } .tkt-pager-btn:hover { background: var(--bg-elev); color: var(--text); text-decoration: none !important; } .tkt-pager-btn.is-active { background: var(--accent); border-color: var(--accent); color: #fff; } .tkt-pager-btn.is-active:hover { color: #fff; background: var(--accent-bright); border-color: var(--accent-bright); } /* ─ Card container ──────────────────────── */ .tkt-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow-x: auto; overflow-y: hidden; margin-bottom: 20px; box-shadow: 0 2px 16px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04); } html[data-theme="dark"] .tkt-card { box-shadow: 0 2px 20px rgba(0,0,0,0.3); } /* ─ Table ──────────────────────────────── */ .tkt-table { width: 100%; min-width: 1100px; border-collapse: collapse; border-spacing: 0; font-size: 13px; } /* Head */ .tkt-table thead tr { background: var(--bg-elev); border-bottom: 1px solid var(--border); } .tkt-table thead th { padding: 11px 16px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted); white-space: nowrap; text-align: left; user-select: none; } .tkt-table thead th a { color: inherit !important; text-decoration: none !important; } .tkt-table thead th a:hover { color: var(--text) !important; } .tkt-table thead th .fa { color: var(--text-dim); font-size: 12px; } .tkt-select-head { width: 42px; text-align: center; } .tkt-select-all { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 7px; background: var(--card); color: var(--text-muted); cursor: pointer; } .tkt-select-all:hover, .tkt-select-all.is-active { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--accent); } /* Body rows */ .tkt-table tbody tr { border-bottom: 1px solid var(--border); transition: background .08s; } .tkt-table tbody tr:last-child { border-bottom: none; } .tkt-table tbody tr:hover { background: color-mix(in oklab, var(--accent) 10%, var(--card)) !important; cursor: pointer; } /* Row state accents — left border strip */ .tkt-table tbody tr.tkt-critical { border-left: 3px solid var(--negative); background: color-mix(in oklab, var(--negative) 6%, var(--card)); } .tkt-table tbody tr.tkt-critical:hover { background: color-mix(in oklab, var(--negative) 13%, var(--card)) !important; } .tkt-table tbody tr.tkt-active { border-left: 3px solid var(--accent-bright); background: color-mix(in oklab, var(--accent) 8%, var(--card)); } .tkt-table tbody tr.tkt-active:hover { background: color-mix(in oklab, var(--accent) 16%, var(--card)) !important; } .tkt-table tbody tr.tkt-wait { border-left: 3px solid var(--warn); background: color-mix(in oklab, var(--warn) 7%, var(--card)); } .tkt-table tbody tr.tkt-wait:hover { background: color-mix(in oklab, var(--warn) 15%, var(--card)) !important; } /* Cells */ .tkt-table td { padding: 13px 16px; color: var(--text); vertical-align: middle; } .tkt-table td a { color: var(--text) !important; text-decoration: none !important; font-weight: 500; } .tkt-table td a:hover { color: var(--accent-bright) !important; } /* Ticket ID */ .tkt-col-id a { font-weight: 700 !important; color: var(--accent-bright) !important; font-size: 12.5px; } .tkt-col-id a:hover { color: var(--accent) !important; } /* Date cells */ .tkt-col-date { font-size: 12px; color: var(--text-muted); white-space: nowrap; } /* Subject */ .tkt-col-subject { max-width: 260px; } .tkt-col-subject a { font-weight: 600 !important; color: var(--text) !important; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tkt-col-subject a:hover { color: var(--accent-bright) !important; } /* Person name */ .tkt-col-person { font-size: 12.5px; } /* Assignment stars */ .tkt-table .assignedyou { color: var(--accent) !important; font-weight: 700; } .tkt-table .assignedother { color: var(--accent-bright) !important; font-weight: 700; } /* ─ Status badges ───────────────────────── */ .tkt-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .tkt-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; opacity: .9; } /* Status badge colors — light */ .tkt-s-open { background: #e8f0fe; color: #2a5bd7; } .tkt-s-wait { background: #fff4e5; color: #b45309; } .tkt-s-replied { background: #e6f9f0; color: #1a7a4a; } .tkt-s-progress { background: #f0ebff; color: #6d3fc7; } .tkt-s-hold { background: #f0f2f5; color: #5a6475; border: 1px solid #d8dde5; } .tkt-s-analysis { background: #e5f6fb; color: #0a7ea4; } .tkt-s-closed { background: #f2f3f5; color: #7a8394; } .tkt-s-agtest { background: #ccfbf1; color: #0d9488; } .tkt-s-agupdate { background: #ffedd5; color: #c2410c; } /* Status badge colors — dark */ html:not([data-theme="light"]) .tkt-s-open { background: rgba(42,91,215,.18); color: #93b4f8; } html:not([data-theme="light"]) .tkt-s-wait { background: rgba(180,83,9,.18); color: #fbbc74; } html:not([data-theme="light"]) .tkt-s-replied { background: rgba(26,122,74,.18); color: #6ee7a0; } html:not([data-theme="light"]) .tkt-s-progress { background: rgba(109,63,199,.18); color: #c4a8fb; } html:not([data-theme="light"]) .tkt-s-hold { background: rgba(90,100,117,.18); color: #9eaabb; } html:not([data-theme="light"]) .tkt-s-analysis { background: rgba(10,126,164,.18); color: #67d5f5; } html:not([data-theme="light"]) .tkt-s-closed { background: rgba(122,131,148,.15);color: #aab3c2; } html:not([data-theme="light"]) .tkt-s-agtest { background: rgba(13,148,136,.18); color: #5eead4; } html:not([data-theme="light"]) .tkt-s-agupdate { background: rgba(194,65,12,.18); color: #fb923c; } /* Finalizar button — inline with status badge */ .tkt-col-status { width: 150px; } .tkt-col-action { text-align: center; width: 40px; } .tkt-finalizar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(22,163,74,.12); color: #16a34a !important; border: none; font-size: 15px; text-decoration: none !important; transition: background .15s, transform .1s, box-shadow .15s; cursor: pointer; } .tkt-finalizar:hover { background: rgba(22,163,74,.28); color: #16a34a !important; transform: scale(1.08); box-shadow: 0 2px 10px rgba(22,163,74,.25); } /* ─ Footer bar ──────────────────────────── */ .tkt-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 0 6px; } .tkt-legend { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); } .tkt-legend span { display: inline-flex; align-items: center; gap: 5px; } .tkt-legend .assignedyou { color: var(--accent); font-weight: 700; } .tkt-legend .assignedother { color: var(--accent-bright); font-weight: 700; } .tkt-actions { display: flex; align-items: center; gap: 8px; } .tkt-actions select { height: 32px; padding: 0 10px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); font-size: 12.5px; font-family: inherit; outline: none; transition: border-color .12s; } .tkt-actions select:focus { border-color: var(--accent-bright); } .tkt-exec-btn { height: 32px; padding: 0 18px; border-radius: 8px; background: var(--accent); border: none; color: #fff; font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background .12s; white-space: nowrap; } .tkt-exec-btn:hover { background: var(--accent-bright); } /* ─ Empty state ─────────────────────────── */ .tkt-empty { padding: 52px 24px; text-align: center; } .tkt-empty-icon { font-size: 40px; color: var(--border-strong); margin-bottom: 14px; } .tkt-empty-text { font-size: 14px; color: var(--text-muted); font-style: italic; } /* ─ Legacy overrides (keep for other pages) */ .orangebutton, input.orangebutton { background: var(--accent) !important; border: 1.5px solid var(--accent) !important; color: #fff !important; border-radius: var(--radius-xs) !important; padding: 5px 14px !important; font: inherit !important; font-size: 12.5px !important; font-weight: 600 !important; cursor: pointer !important; vertical-align: middle !important; } .orangebutton:hover, input.orangebutton:hover { background: var(--accent-bright) !important; border-color: var(--accent-bright) !important; } /* ===== ICONS (FontAwesome) ===== */ .ora-flag-critical { color: var(--negative) !important; font-size: 14px; } .ora-flag-high { color: #E8763A !important; font-size: 14px; } .ora-flag-medium { color: var(--warn) !important; font-size: 14px; } .ora-flag-low { color: var(--text-dim) !important; font-size: 14px; } .ora-icon-archive { color: var(--accent-bright) !important; font-size: 13px; } .ora-icon-btn { text-decoration: none !important; } .ora-icon-play { color: var(--positive) !important; font-size: 16px; transition: color .12s; } .ora-icon-stop { color: var(--negative) !important; font-size: 16px; transition: color .12s; } .ora-icon-active { color: var(--accent-bright) !important; font-size: 15px; } .ora-icon-btn:hover .ora-icon-play { color: color-mix(in oklab, var(--positive) 75%, #000) !important; } .ora-icon-btn:hover .ora-icon-stop { color: color-mix(in oklab, var(--negative) 75%, #000) !important; } /* header icon cells */ th.admin_white .fa { color: var(--text-dim) !important; font-size: 13px; } /* Legacy admin_white/admin_gray cells inside tkt-table (manage_boards etc.): neutralize hardcoded light bg + #4a5571 text so contrast works in both themes */ .ora-admin-page-wrap h3 { color: var(--text) !important; } /* legacy h3 olive from hesk_style */ table.tkt-table.white { background: transparent !important; /* legacy .white table bg leaks through transparent cells */ border-collapse: collapse; } .tkt-table td.admin_white, .tkt-table td.admin_gray { background: transparent !important; /* shorthand also kills legacy background-image */ color: var(--text) !important; border-color: var(--border) !important; font-size: 13px; } .tkt-table tr:nth-child(even) td.admin_white, .tkt-table tr:nth-child(even) td.admin_gray { background-color: color-mix(in oklab, var(--text) 4%, transparent) !important; } .tkt-table th.admin_white { background: var(--bg-elev) !important; /* shorthand kills tableheader.jpg image */ color: var(--text-muted) !important; border-color: var(--border) !important; } .tkt-table td.admin_white code, .tkt-table td.admin_gray code { color: var(--accent-bright) !important; background: color-mix(in oklab, var(--accent) 12%, transparent) !important; padding: 2px 6px; border-radius: 5px; } /* SOL status images — keep existing PNGs but size them consistently */ td img[src*="status-solicitacao"] { width: 20px; height: 20px; vertical-align: middle; } /* ===== STATUS LABELS — Text color only, no pill ===== */ label span.open, label span.replied, label span.critical, label span.important, label span.waitingreply, label span.inprogress, label span.onhold, label span.resolved, label span.analysis, label span.agtest, label span.agupdate, label span.medium, label span.normal, label span.online, label span.offline, label span.warn, label span.restarting { background: none !important; border: none !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; display: inline !important; } /* ===== ADMIN MAIN PAGE ===== */ .ora-admin-page-wrap { padding: 0; } .ora-admin-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--border); } .ora-admin-eyebrow { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-bright); margin-bottom: 4px; } .ora-admin-title { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); margin: 0; line-height: 1.15; } .ora-admin-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* ─ KPI grid ─ */ .ora-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; } .ora-kpi-card { position: relative; display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; overflow: hidden; transition: box-shadow 0.15s, transform 0.15s; } .ora-kpi-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); transform: translateY(-1px); } html:not([data-theme="light"]) .ora-kpi-card:hover { box-shadow: 0 4px 24px rgba(0,0,0,0.25); } .ora-kpi-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; font-size: 18px; flex-shrink: 0; } .ora-kpi-icon--open { background: color-mix(in oklab, #4F46E5 12%, transparent); color: #6366F1; } .ora-kpi-icon--wait { background: color-mix(in oklab, #D97706 12%, transparent); color: #F59E0B; } .ora-kpi-icon--replied { background: color-mix(in oklab, #8B5CF6 12%, transparent); color: #8B5CF6; } .ora-kpi-icon--progress { background: color-mix(in oklab, #0891B2 12%, transparent); color: #06B6D4; } .ora-kpi-icon--hold { background: color-mix(in oklab, #7C3AED 12%, transparent); color: #8B5CF6; } .ora-kpi-icon--agtest { background: color-mix(in oklab, #0d9488 12%, transparent); color: #0d9488; } .ora-kpi-icon--closed { background: color-mix(in oklab, #16A34A 12%, transparent); color: #22C55E; } .ora-kpi-body { flex: 1; min-width: 0; } .ora-kpi-value { font-size: 28px; font-weight: 800; letter-spacing: -0.04em; color: var(--text); line-height: 1; margin-bottom: 3px; } .ora-async-loading, .ora-async-error { margin: 18px 0; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-muted); text-align: center; } .ora-async-error { border-color: #fecaca; color: #991b1b; } .ora-kpi-label { font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .ora-kpi-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 14px 0 0 14px; } .ora-kpi-stripe--open { background: #6366F1; } .ora-kpi-stripe--wait { background: #F59E0B; } .ora-kpi-stripe--replied { background: #8B5CF6; } .ora-kpi-stripe--progress { background: #06B6D4; } .ora-kpi-stripe--hold { background: #8B5CF6; } .ora-kpi-stripe--agtest { background: #0d9488; } .ora-kpi-stripe--closed { background: #22C55E; } @media (max-width: 960px) { .ora-kpi-grid { grid-template-columns: repeat(2, 1fr); } } /* ===== TICKET DETAIL PAGE ===== */ .ora-ticket-subject-wrap { display: flex; align-items: flex-start; gap: 10px; padding: 14px 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 18px; flex-wrap: wrap; } .ora-ticket-subject { font-size: 26px; font-weight: 800; color: var(--negative); margin: 0; flex: 1; line-height: 1.3; text-transform: uppercase; letter-spacing: .02em; } .ora-ticket-subject img { vertical-align: middle; margin-right: 4px; } .ora-client-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 12.5px; color: var(--text-muted); line-height: 1.6; min-width: 200px; max-width: 280px; flex-shrink: 0; } .ora-client-card strong { color: var(--text); display: block; font-size: 13px; } .ora-detail-table { width: 100%; border-collapse: collapse; font-size: 13px; } .ora-detail-table td { padding: 9px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; } .ora-detail-table select { font-size: 12px; padding: 3px 6px; height: auto; width: auto; max-width: 200px; } .ora-detail-table td:first-child { color: var(--text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; width: 190px; background: var(--bg-elev); } .ora-detail-table tr:last-child td { border-bottom: none; } .ora-detail-table td select, .ora-detail-table td input[type="text"] { border: 1.5px solid var(--border); border-radius: var(--radius-xs); background: var(--card); color: var(--text); font-size: 12px; padding: 4px 8px; font-family: inherit; outline: none; } .ora-detail-table td select:focus { border-color: var(--accent-bright); } ul.tabs { display: flex; gap: 2px; padding: 0; margin: 0 0 0; list-style: none; border-bottom: 2px solid var(--border); } ul.tabs li { margin: 0; } ul.tabs li a { display: inline-block; padding: 8px 18px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); text-decoration: none !important; border-radius: var(--radius-xs) var(--radius-xs) 0 0; border: 1.5px solid transparent; border-bottom: none; transition: background .12s, color .12s; position: relative; bottom: -2px; } ul.tabs li a:hover { color: var(--text); background: var(--card-hover); text-decoration: none !important; } ul.tabs li a.active, ul.tabs li.active a { color: var(--accent); background: var(--card); border-color: var(--border); border-bottom-color: var(--card); font-weight: 700; } .tabcontents { padding-top: 20px; } .ora-notes-section { margin-top: 8px; } .ora-note { background: color-mix(in oklab, var(--warn) 6%, var(--card)); border: 1px solid color-mix(in oklab, var(--warn) 20%, transparent); border-left: 3px solid var(--warn); border-radius: var(--radius-xs); padding: 8px 12px; margin-bottom: 6px; font-size: 12.5px; } .ora-note-meta { color: var(--text-muted); font-size: 11.5px; margin-bottom: 4px; } .tkt-prio-critical { color: var(--negative) !important; font-weight: 700; } .tkt-prio-high { color: #e8763a !important; font-weight: 700; } .tkt-prio-medium { color: var(--warn) !important; font-weight: 700; } .tkt-prio-low { color: var(--text-muted); } /* ===== ADMIN ACTION BUTTONS ===== */ .ora-admin-btns { display:flex; align-items:center; gap:2px; } .ora-admin-btn { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:var(--radius-xs); color:var(--text-muted); text-decoration:none; font-size:14px; transition:background .12s, color .12s; } .ora-admin-btn:hover { background:var(--bg-elev); color:var(--accent); } .ora-admin-btn-active { color:var(--accent); } .ora-admin-btn-danger:hover { background:color-mix(in oklab,var(--negative) 10%,transparent); color:var(--negative); } /* ===== MESSAGE THREAD ===== */ .ora-thread { display: flex; flex-direction: column; gap: 12px; } .ora-msg { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); } .ora-msg-client { border-left: 4px solid var(--warn); } .ora-msg-staff { border-left: 4px solid var(--accent); } .ora-msg-private { border-left: 4px solid var(--negative); } .ora-msg-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 9px 14px; font-size: 12.5px; } .ora-msg-client .ora-msg-head { background: color-mix(in oklab, var(--warn) 8%, var(--card)); } .ora-msg-staff .ora-msg-head { background: color-mix(in oklab, var(--accent) 6%, var(--card)); } .ora-msg-private .ora-msg-head { background: color-mix(in oklab, var(--negative) 6%, var(--card)); } .ora-msg-author { font-weight: 700; color: var(--text); } .ora-msg-date { color: var(--text-muted); font-size: 11.5px; } .ora-msg-head-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ora-msg-head-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .ora-msg-private-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--negative); background: color-mix(in oklab, var(--negative) 10%, transparent); border: 1px solid color-mix(in oklab, var(--negative) 25%, transparent); border-radius: 4px; padding: 2px 6px; } .ora-msg-body { padding: 14px 16px; font-size: 13.5px; line-height: 1.7; color: var(--text); background: var(--card); } .ora-msg-body p { margin: 0 0 8px; } .ora-msg-body p:last-child { margin-bottom: 0; } .ora-msg-att { padding: 10px 16px 12px; background: var(--bg-elev); border-top: 1px solid var(--border); } .ora-msg-att-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 8px; } .ora-msg-att-list { display: flex; flex-wrap: wrap; gap: 8px; } .ora-msg-att-item { display: flex; align-items: center; gap: 6px; background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius-xs); padding: 5px 10px; font-size: 12px; color: var(--text); text-decoration: none; transition: border-color .12s, color .12s; } .ora-msg-att-item:hover { border-color: var(--accent); color: var(--accent); } .ora-msg-att-item i { color: var(--accent); font-size: 14px; flex-shrink: 0; } .ora-msg-att-del { background: none; border: none; cursor: pointer; padding: 2px 5px; color: var(--text-dim); font-size: 13px; border-radius: var(--radius-xs); line-height: 1; transition: color .12s; } .ora-msg-att-del:hover { color: var(--negative); } .ora-msg-img-preview { max-width: 100%; max-height: 400px; border-radius: var(--radius-xs); margin-top: 10px; display: block; } .ora-msg-rating { font-size: 12px; color: var(--text-muted); padding: 6px 16px 8px; background: var(--card); border-top: 1px solid var(--border); } /* ===== RESPONSIVE ===== */ @media (max-width: 768px) { :root { --pad-page: 14px; --pad-card: 14px; --gap: 12px; } .ora-topbar-inner { padding: 0 14px; } .ora-main { padding: 14px 14px 40px; } .ora-nav { gap: 0; } .ora-nav-item { padding: 5px 7px; font-size: 11.5px; } } /* ── FASE 3: Melhorias visuais ─────────────────────────── */ /* Tipografia */ :root { --ora-fs-h1: 1.75rem; --ora-fs-h2: 1.25rem; --ora-fs-body: 0.875rem; --ora-fs-small: 0.75rem; } body { font-size: var(--ora-fs-body); } h1 { font-size: var(--ora-fs-h1); } h2 { font-size: var(--ora-fs-h2); } /* KPI cards — hover lift */ .ora-kpi-card { transition: transform 0.15s ease, box-shadow 0.15s ease; } .ora-kpi-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); } /* Ticket table — zebra striping */ .tkt-table tbody tr:nth-child(even) { background-color: rgba(0,0,0,0.025); } [data-theme="dark"] .tkt-table tbody tr:nth-child(even) { background-color: rgba(255,255,255,0.04); } /* Status badges — colors defined above near .tkt-badge */ /* SOL column */ .tkt-col-sol { white-space: nowrap; } .sol-num { display: inline-block; font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--bg-elev); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; margin-right: 4px; vertical-align: middle; letter-spacing: 0.03em; } .sol-icon { font-size: 14px; vertical-align: middle; } .sol-deleted { color: var(--negative); } .sol-done { color: var(--positive); } .sol-test { color: #17a2b8; } .sol-dev { color: var(--positive); } .sol-wip { color: var(--warn); } .sol-analysis { color: var(--text-muted); } .sol-new { color: var(--accent); } .sol-none { color: var(--border-strong); } /* Ticket type icon badges */ .tp-badge { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: 12px; } /* D=Dúvida, E=Erro, I=Implementação, S=Instalação, VT=Visita Técnica */ /* Fundo neutro uniforme — só o ícone carrega a cor semântica */ .tp-question, .tp-error, .tp-impl, .tp-install, .tp-visit, .tp-other { background: rgba(0,0,0,.06); } .tp-question { color: #7c6fcd; } .tp-error { color: #e05252; } .tp-impl { color: #3b9db8; } .tp-install { color: #3a9e5f; } .tp-visit { color: #c49a1a; } .tp-other { color: #8b95a1; } .tp-none { background: transparent; color: var(--border-strong); } [data-theme="dark"] .tp-question, [data-theme="dark"] .tp-error, [data-theme="dark"] .tp-impl, [data-theme="dark"] .tp-install, [data-theme="dark"] .tp-visit, [data-theme="dark"] .tp-other { background: rgba(255,255,255,.08); } [data-theme="dark"] .tp-question { color: #a99ef5; } [data-theme="dark"] .tp-error { color: #f87171; } [data-theme="dark"] .tp-impl { color: #67c9e0; } [data-theme="dark"] .tp-install { color: #6ee7a0; } [data-theme="dark"] .tp-visit { color: #fcd34d; } [data-theme="dark"] .tp-other { color: #94a3b8; } /* Empty CTA button */ .tkt-empty-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 8px 18px; background: var(--accent); color: #fff !important; border-radius: var(--radius-xs); font-size: 13px; font-weight: 600; text-decoration: none !important; transition: background .15s; } .tkt-empty-cta:hover { background: var(--accent-bright); } /* Topbar nav separator */ .ora-topbar-nav-item + .ora-topbar-nav-item { border-left: 1px solid rgba(255,255,255,0.15); } /* Bottombar badge */ .ora-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--accent, #f59e0b); color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 1; } /* ── BootstrapDialog compat (Bootstrap CSS removido) ── */ .modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1040; } .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1050; overflow: auto; } .modal.in { display: block; } .modal-dialog { position: relative; margin: 60px auto; max-width: 560px; width: auto; } .modal-content { background: #fff; border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); overflow: hidden; } [data-theme="dark"] .modal-content { background: #1e2432; color: #e2e8f0; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(0,0,0,0.1); } [data-theme="dark"] .modal-header { border-bottom-color: rgba(255,255,255,0.1); } .modal-header .modal-title { font-size: 1rem; font-weight: 600; margin: 0; } .modal-body { padding: 20px; } .modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid rgba(0,0,0,0.1); } [data-theme="dark"] .modal-footer { border-top-color: rgba(255,255,255,0.1); } .close { background: none; border: none; font-size: 1.4rem; cursor: pointer; opacity: 0.6; line-height: 1; padding: 0; } .close:hover { opacity: 1; } .btn { display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; font-size: 0.875rem; font-weight: 500; transition: opacity 0.15s; } .btn:hover { opacity: 0.85; } .btn-success { background: #28a745; color: #fff; border-color: #28a745; } .btn-danger { background: #dc3545; color: #fff; border-color: #dc3545; } .btn-default { background: #f8f9fa; color: #343a40; border-color: #dee2e6; } .btn-primary { background: #007bff; color: #fff; border-color: #007bff; } .btn-warning { background: #ffc107; color: #212529; border-color: #ffc107; } .btn-info { background: #17a2b8; color: #fff; border-color: #17a2b8; } .form-control { display: block; width: 100%; padding: 6px 12px; font-size: 0.875rem; border: 1px solid #ced4da; border-radius: 4px; background: #fff; color: #495057; } [data-theme="dark"] .form-control { background: #2d3748; border-color: #4a5568; color: #e2e8f0; } /* ── FASE 5: admin_main redesenho ── */ /* KPI card como link */ a.ora-kpi-link { text-decoration: none; color: inherit; cursor: pointer; } a.ora-kpi-link:hover { text-decoration: none; } /* Grid de 5 KPIs (staff) — responsivo */ .ora-kpi-grid--5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } @media (max-width: 1100px) { .ora-kpi-grid--5 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .ora-kpi-grid--5 { grid-template-columns: repeat(2, 1fr); } } .ora-kpi-grid--6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } @media (max-width: 1200px) { .ora-kpi-grid--6 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .ora-kpi-grid--6 { grid-template-columns: repeat(2, 1fr); } } .ora-kpi-grid--7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 16px; } @media (max-width: 1400px) { .ora-kpi-grid--7 { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 640px) { .ora-kpi-grid--7 { grid-template-columns: repeat(2, 1fr); } } .ora-kpi-grid--8 { display: flex; flex-wrap: wrap; gap: 12px; } .ora-kpi-grid--8 .ora-kpi-card { flex: 1 1 0; min-width: 120px; } @media (max-width: 640px) { .ora-kpi-grid--8 .ora-kpi-card { min-width: calc(50% - 6px); } } /* KPI config button & panel */ .ora-kpi-wrap { position: relative; margin-bottom: 1.5rem; } .ora-kpi-cfg-btn { position: absolute; top: -34px; right: 0; background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted); cursor: pointer; padding: 4px 10px; font-size: 13px; transition: background .15s, color .15s; } .ora-kpi-cfg-btn:hover { background: var(--surface2); color: var(--text); } /* Grid de 3 KPIs (cliente) */ .ora-kpi-grid--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 640px) { .ora-kpi-grid--3 { grid-template-columns: 1fr; } } /* Stripe e ícone para Críticos */ .ora-kpi-stripe--critical { background: #dc3545; } .ora-kpi-icon--critical { background: rgba(220,53,69,0.12); color: #dc3545; } /* Status 4 — Em Andamento */ .ora-kpi-icon--andamento { background: color-mix(in oklab, #EA580C 12%, transparent); color: #F97316; } .ora-kpi-stripe--andamento { background: #F97316; } /* Status 8 — Ag. Atualização */ .ora-kpi-icon--agupdate { background: color-mix(in oklab, #0284C7 12%, transparent); color: #0EA5E9; } .ora-kpi-stripe--agupdate { background: #0EA5E9; } /* Status 9 — Ag. lib. versão */ .ora-kpi-icon--aglibver { background: color-mix(in oklab, #DB2777 12%, transparent); color: #EC4899; } .ora-kpi-stripe--aglibver { background: #EC4899; } /* Custom card color classes */ .ora-kpi-cc--blue { background: color-mix(in oklab, #3B82F6 12%, transparent); color: #3B82F6; } .ora-kpi-cc--blue-stripe { background: #3B82F6; } .ora-kpi-cc--green { background: color-mix(in oklab, #16A34A 12%, transparent); color: #22C55E; } .ora-kpi-cc--green-stripe { background: #22C55E; } .ora-kpi-cc--purple { background: color-mix(in oklab, #7C3AED 12%, transparent); color: #8B5CF6; } .ora-kpi-cc--purple-stripe { background: #8B5CF6; } .ora-kpi-cc--orange { background: color-mix(in oklab, #EA580C 12%, transparent); color: #F97316; } .ora-kpi-cc--orange-stripe { background: #F97316; } .ora-kpi-cc--teal { background: color-mix(in oklab, #0D9488 12%, transparent); color: #14B8A6; } .ora-kpi-cc--teal-stripe { background: #14B8A6; } .ora-kpi-cc--pink { background: color-mix(in oklab, #DB2777 12%, transparent); color: #EC4899; } .ora-kpi-cc--pink-stripe { background: #EC4899; } .ora-kpi-cc--red { background: color-mix(in oklab, #DC2626 12%, transparent); color: #EF4444; } .ora-kpi-cc--red-stripe { background: #EF4444; } .ora-kpi-cc--gray { background: color-mix(in oklab, #6B7280 12%, transparent); color: #9CA3AF; } .ora-kpi-cc--gray-stripe { background: #9CA3AF; } /* Card needs relative positioning for the delete button */ .ora-kpi-card { position: relative; } /* Custom card delete button (shown on hover) */ .ora-kpi-cc-del { position: absolute; top: 4px; right: 4px; background: var(--card-hover, rgba(0,0,0,.08)); border: none; border-radius: 50%; width: 18px; height: 18px; cursor: pointer; display: none; align-items: center; justify-content: center; font-size: .6rem; color: var(--text-muted, #666); padding: 0; line-height: 1; } .ora-kpi-card:hover .ora-kpi-cc-del { display: flex; } /* Custom card list item in panel */ .ora-kpi-cc-item { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 4px; font-size: .8rem; margin-bottom: 3px; } .ora-kpi-cc-item:hover { background: var(--card-hover); } /* ===== REPORTS EXPERIENCE ===== */ .ora-report-shell { max-width: 1500px; } .ora-report-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; min-height: 230px; margin-bottom: 34px; padding: 42px 46px; border: 1px solid var(--border); border-radius: 24px; color: #fff; background: radial-gradient(circle at 88% 15%, rgba(255,255,255,.16), transparent 24%), linear-gradient(125deg, #172554 0%, #3730a3 56%, #7c3aed 100%); box-shadow: 0 18px 45px rgba(49,46,129,.22); } .ora-report-hero::after { content:""; position:absolute; width:260px; height:260px; right:-75px; bottom:-140px; border:38px solid rgba(255,255,255,.08); border-radius:50%; } .ora-report-hero-copy { position: relative; z-index: 1; max-width: 760px; } .ora-report-hero .ora-admin-eyebrow { color: #c7d2fe; } .ora-report-hero h1 { margin: 10px 0 12px; font-size: clamp(30px,4vw,48px); line-height: 1.05; letter-spacing: -.045em; font-weight: 850; } .ora-report-hero p { max-width: 670px; margin: 0; color: #e0e7ff; font-size: 16px; line-height: 1.65; } .ora-report-hero-mark { position: relative; z-index: 1; display:grid; place-items:center; width:112px; height:112px; border:1px solid rgba(255,255,255,.24); border-radius:28px; background:rgba(255,255,255,.12); font-size:46px; backdrop-filter:blur(10px); } .ora-section-heading, .ora-report-panel-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:18px; } .ora-section-heading h2, .ora-report-panel-head h2 { margin:3px 0 0; color:var(--text); font-size:22px; letter-spacing:-.025em; } .ora-section-kicker { color:var(--accent-bright); font-size:10px; font-weight:800; letter-spacing:.14em; } .ora-report-count { display:inline-flex; align-items:center; min-height:30px; padding:5px 11px; border:1px solid var(--border); border-radius:999px; background:var(--surface2); color:var(--text-muted); font-size:12px; font-weight:700; white-space:nowrap; } .ora-report-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px; } .ora-report-card { --report-accent:#6366f1; grid-column:span 2; display:flex; flex-direction:column; min-height:250px; padding:24px; color:var(--text); text-decoration:none!important; border:1px solid var(--border); border-radius:18px; background:linear-gradient(145deg,var(--card),var(--surface)); box-shadow:0 8px 24px rgba(15,23,42,.04); transition:transform .2s,border-color .2s,box-shadow .2s; } .ora-report-card:nth-child(-n+2) { grid-column:span 3; min-height:270px; } .ora-report-card:hover { color:var(--text); transform:translateY(-4px); border-color:color-mix(in srgb,var(--report-accent) 50%,var(--border)); box-shadow:0 18px 38px color-mix(in srgb,var(--report-accent) 14%,transparent); } .ora-report-card--blue { --report-accent:#3b82f6; }.ora-report-card--violet { --report-accent:#8b5cf6; }.ora-report-card--cyan { --report-accent:#06b6d4; }.ora-report-card--amber { --report-accent:#f59e0b; }.ora-report-card--green { --report-accent:#22c55e; } .ora-report-card-top { display:flex; align-items:center; justify-content:space-between; } .ora-report-card-icon { display:grid; place-items:center; width:50px; height:50px; border-radius:14px; color:var(--report-accent); background:color-mix(in srgb,var(--report-accent) 13%,transparent); font-size:20px; } .ora-report-card-tag { color:var(--text-muted); font-size:10px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; } .ora-report-card-body { flex:1; padding-top:24px; }.ora-report-card h3 { margin:0 0 9px; color:var(--text); font-size:20px; letter-spacing:-.025em; }.ora-report-card p { margin:0; color:var(--text-muted); line-height:1.55; font-size:13px; } .ora-report-card-link { display:flex; align-items:center; gap:9px; margin-top:22px; color:var(--report-accent); font-size:12px; font-weight:800; }.ora-report-card-link i { transition:transform .2s; }.ora-report-card:hover .ora-report-card-link i { transform:translateX(4px); } .ora-report-tip { display:flex; align-items:center; gap:14px; margin-top:24px; padding:16px 18px; border:1px solid var(--border); border-radius:14px; background:var(--surface); color:var(--text-muted); }.ora-report-tip>i { color:#f59e0b; font-size:20px; }.ora-report-tip div { display:flex; flex-direction:column; gap:2px; }.ora-report-tip strong { color:var(--text); font-size:13px; }.ora-report-tip span { font-size:12px; } .ora-report-page-header { display:flex; align-items:flex-end; justify-content:space-between; gap:26px; margin-bottom:22px; padding-bottom:24px; border-bottom:1px solid var(--border); }.ora-report-page-header>div { max-width:720px; }.ora-report-page-header h1 { margin-top:7px; font-size:30px; }.ora-report-page-header p { margin:8px 0 0; color:var(--text-muted); line-height:1.5; } .ora-report-back { display:inline-flex; align-items:center; gap:7px; margin-bottom:20px; color:var(--text-muted); font-size:12px; font-weight:700; text-decoration:none!important; }.ora-report-back:hover { color:var(--accent-bright); } .ora-report-filter { display:flex; align-items:flex-end; gap:10px; padding:14px; border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:0 6px 20px rgba(15,23,42,.04); }.ora-report-filter label { margin:0; }.ora-report-filter label span { display:block; margin-bottom:6px; color:var(--text-muted); font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }.ora-report-filter .form-control { min-width:145px; height:38px; }.ora-report-filter--compact .form-control { min-width:155px; } .ora-report-notice { display:flex; align-items:center; gap:10px; margin-bottom:18px; padding:11px 14px; border:1px solid color-mix(in srgb,#3b82f6 22%,var(--border)); border-radius:11px; background:color-mix(in srgb,#3b82f6 7%,var(--surface)); color:var(--text-muted); font-size:12px; }.ora-report-notice i { color:#3b82f6; } .ora-report-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:22px; }.ora-report-kpis--3 { grid-template-columns:repeat(3,minmax(0,1fr)); } .ora-report-kpi { --kpi-accent:#3b82f6; display:flex; align-items:center; gap:14px; min-height:112px; padding:18px; border:1px solid var(--border); border-radius:15px; background:var(--card); box-shadow:0 5px 16px rgba(15,23,42,.035); }.ora-report-kpi-icon { display:grid; place-items:center; width:42px; height:42px; flex:0 0 42px; border-radius:12px; color:var(--kpi-accent); background:color-mix(in srgb,var(--kpi-accent) 12%,transparent); font-size:17px; }.ora-report-kpi div { min-width:0; }.ora-report-kpi strong { display:block; color:var(--text); font-size:28px; line-height:1; letter-spacing:-.04em; }.ora-report-kpi div span { display:block; margin-top:6px; color:var(--text-muted); font-size:10px; font-weight:750; letter-spacing:.04em; text-transform:uppercase; } .ora-report-kpi--violet{--kpi-accent:#8b5cf6}.ora-report-kpi--green{--kpi-accent:#22c55e}.ora-report-kpi--cyan{--kpi-accent:#06b6d4}.ora-report-kpi--amber{--kpi-accent:#f59e0b}.ora-report-kpi--rose{--kpi-accent:#f43f5e}.ora-report-kpi--blue{--kpi-accent:#3b82f6} .ora-report-panel { overflow:hidden; border:1px solid var(--border); border-radius:16px; background:var(--card); box-shadow:0 8px 28px rgba(15,23,42,.045); }.ora-report-panel-head { margin:0; padding:20px 22px 16px; border-bottom:1px solid var(--border); }.ora-report-panel-head h2 { font-size:18px; } .ora-report-table { margin:0!important; color:var(--text); }.ora-report-table thead th { padding:13px 15px!important; border-bottom:1px solid var(--border)!important; background:var(--surface2); color:var(--text-muted); font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; }.ora-report-table tbody td { padding:14px 15px!important; border-top:1px solid var(--border)!important; vertical-align:middle!important; }.ora-report-table tbody tr:hover { background:var(--card-hover); }.ora-report-subject { min-width:240px; font-weight:650; }.ora-ticket-pill,.ora-number-pill { display:inline-flex; align-items:center; justify-content:center; padding:5px 9px; border-radius:8px; font-size:11px; font-weight:800; }.ora-ticket-pill { color:#6366f1; background:rgba(99,102,241,.1); text-decoration:none!important; }.ora-number-pill { min-width:30px; color:var(--text); background:var(--surface2); }.ora-report-date { color:var(--text-muted); font-size:11px; white-space:nowrap; } .ora-report-bar { overflow:hidden; height:8px; min-width:180px; border-radius:999px; background:var(--surface2); }.ora-report-bar span { display:block; height:100%; min-width:4px; border-radius:inherit; background:linear-gradient(90deg,#4f46e5,#8b5cf6); }.ora-report-empty { display:flex; flex-direction:column; align-items:center; gap:6px; padding:45px 20px; color:var(--text-muted); text-align:center; }.ora-report-empty i { margin-bottom:5px; font-size:30px; opacity:.6; }.ora-report-empty strong { color:var(--text); font-size:14px; }.ora-report-empty span { font-size:12px; } .ora-report-legacy { padding:0 24px 28px; }.ora-report-legacy .page-header { margin:0 0 20px; padding:0; border:0; color:var(--text); font-size:22px; }.ora-report-legacy form { margin-bottom:24px; padding:18px; border:1px solid var(--border); border-radius:14px; background:var(--surface); }.ora-report-legacy .table { overflow:hidden; border:1px solid var(--border); border-radius:12px; background:var(--card); }.ora-report-legacy .btn-primary { border-color:var(--accent); background:var(--accent); }.ora-report-legacy-report>table { border:1px solid var(--border); border-radius:14px; background:var(--card); } @media(max-width:1000px){.ora-report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ora-report-card,.ora-report-card:nth-child(-n+2){grid-column:span 1}.ora-report-page-header{align-items:stretch;flex-direction:column}.ora-report-filter{align-self:flex-start}.ora-report-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.ora-report-hero-mark{display:none}} @media(max-width:640px){.ora-report-hero{min-height:0;padding:30px 24px;border-radius:18px}.ora-report-grid,.ora-report-kpis,.ora-report-kpis--3{grid-template-columns:1fr}.ora-report-filter{width:100%;align-items:stretch;flex-direction:column}.ora-report-filter .form-control{width:100%}.ora-section-heading{align-items:flex-start;flex-direction:column}.ora-report-card{min-height:220px}.ora-report-shell{padding-left:14px;padding-right:14px}.ora-report-bar{min-width:120px}} /* Icon picker grid item */ .ora-kpi-icon-item { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; border: 1px solid transparent; border-radius: 6px; background: none; cursor: pointer; font-size: .92rem; color: var(--text); transition: background .12s, border-color .12s; padding: 0; } .ora-kpi-icon-item:hover { background: var(--card-hover); border-color: var(--border); } .ora-kpi-icon-item.selected { background: color-mix(in oklab, var(--accent) 15%, transparent); border-color: var(--accent); color: var(--accent); } /* Hero da home do cliente */ .ora-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 28px 32px; margin-bottom: 24px; border-radius: 14px; background: linear-gradient(135deg, var(--accent-deep, #1e293b), var(--accent, #4338ca)); color: #fff; } .ora-hero-text h1 { margin: 0 0 4px; font-size: 1.6rem; color: #fff; } .ora-hero-text p { margin: 0; opacity: 0.85; font-size: 0.95rem; } /* Botão CTA grande */ .ora-cta-lg { font-size: 1rem; padding: 14px 28px; border-radius: 10px; font-weight: 600; box-shadow: 0 4px 14px rgba(0,0,0,0.2); } .ora-hero .ora-cta-lg { background: #fff; color: var(--accent, #4338ca); } .ora-hero .ora-cta-lg:hover { opacity: 0.92; } /* Estado vazio com CTA */ .tkt-empty-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 12px 24px; border-radius: 10px; font-weight: 600; text-decoration: none; background: var(--accent, #4338ca); color: #fff; } .tkt-empty-cta:hover { opacity: 0.9; } /* ── KANBAN ── */ /* Toolbar de filtros */ .ora-kanban-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 24px; } .ora-kb-search { position: relative; flex: 1 1 240px; min-width: 200px; } .ora-kb-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted, #94a3b8); font-size: .8rem; pointer-events: none; } .ora-kb-search input { padding-left: 32px !important; padding-right: 30px !important; } .ora-kb-search-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: none; border: 0; background: transparent; cursor: pointer; color: var(--text-muted, #94a3b8); font-size: .8rem; padding: 4px 6px; border-radius: 5px; line-height: 1; } .ora-kb-search-clear:hover { color: var(--text, #1e293b); background: rgba(0,0,0,.05); } .ora-kb-count { font-size: .78rem; font-weight: 600; color: var(--text-muted, #6b7280); white-space: nowrap; margin-left: auto; } .ora-kb-clear { display: none; } .ora-kanban-toolbar.has-active .ora-kb-count { color: var(--accent, #4338ca); } .ora-kb-refresh { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: .78rem; font-weight: 600; color: var(--text-muted, #6b7280); cursor: pointer; white-space: nowrap; } .ora-kb-refresh input { margin: 0; } /* Painel de filtros */ .ora-kanban-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 14px; padding: 16px 20px; background: linear-gradient(180deg, var(--bg, #fff), var(--surface, #f8f9fa)); border: 1px solid var(--border, #e2e8f0); border-radius: 16px; box-shadow: 0 1px 3px rgba(15,23,42,.04); } [data-theme="dark"] .ora-kanban-filters { background: linear-gradient(180deg, #0f172a, #1e293b); border-color: #334155; } .ora-kb-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ora-kb-group + .ora-kb-group { position: relative; } .ora-kb-group-label { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted, #94a3b8); margin-right: 6px; } /* Pílulas (prioridade, sistema) */ .ora-kb-pill { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 6px 14px; border-radius: 999px; cursor: pointer; font-size: .78rem; font-weight: 600; user-select: none; color: var(--text, #334155); background: var(--bg, #fff); border: 1.5px solid var(--border, #e2e8f0); transition: background .15s, border-color .15s, color .15s, transform .08s, box-shadow .15s; } [data-theme="dark"] .ora-kb-pill { color: #e2e8f0; background: #0f172a; border-color: #334155; } .ora-kb-pill input { position: absolute; opacity: 0; width: 0; height: 0; } .ora-kb-pill:hover { border-color: var(--accent, #4338ca); transform: translateY(-1px); } .ora-kb-pill.is-on { background: var(--accent, #4338ca); border-color: var(--accent, #4338ca); color: #fff; box-shadow: 0 3px 10px rgba(67,56,202,.28); } /* check sutil quando marcada */ .ora-kb-pill::before { content: ''; width: 0; opacity: 0; margin: 0; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .68rem; transition: width .15s, opacity .15s, margin .15s; } .ora-kb-pill.is-on::before { content: '\f00c'; width: auto; opacity: 1; } /* cores por prioridade quando marcada */ .ora-kb-pill--p0.is-on { background: #ef4444; border-color: #ef4444; box-shadow: 0 3px 10px rgba(239,68,68,.3); } .ora-kb-pill--p1.is-on { background: #f59e0b; border-color: #f59e0b; box-shadow: 0 3px 10px rgba(245,158,11,.3); } .ora-kb-pill--p2.is-on { background: #3b82f6; border-color: #3b82f6; box-shadow: 0 3px 10px rgba(59,130,246,.3); } .ora-kb-pill--p3.is-on { background: #64748b; border-color: #64748b; box-shadow: 0 3px 10px rgba(100,116,139,.3); } /* Select estilizado (responsável) */ .ora-kb-selectwrap { position: relative; display: inline-flex; align-items: center; } .ora-kb-selectwrap > i:first-child { position: absolute; left: 12px; font-size: .75rem; color: var(--text-muted, #94a3b8); pointer-events: none; } .ora-kb-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; height: auto; line-height: 1.2; padding: 7px 34px 7px 32px; border-radius: 999px; cursor: pointer; font-size: .78rem; font-weight: 600; min-width: 150px; color: var(--text, #334155); background: var(--bg, #fff); border: 1.5px solid var(--border, #e2e8f0); transition: border-color .15s, box-shadow .15s; } [data-theme="dark"] .ora-kb-select { color: #e2e8f0; background: #0f172a; border-color: #334155; } .ora-kb-select:hover { border-color: var(--accent, #4338ca); } .ora-kb-select:focus { outline: none; border-color: var(--accent, #4338ca); box-shadow: 0 0 0 3px rgba(67,56,202,.15); } .ora-kb-select-arrow { position: absolute; right: 14px; font-size: .65rem; color: var(--text-muted, #94a3b8); pointer-events: none; } /* Envolve .ora-kanban (que rola) so as sombras de borda ficam fixas na viewport visivel em vez de rolar junto com as colunas — sem isso a ultima coluna parece cortada/quebrada ao inves de "tem mais pra rolar". */ .ora-kb-scrollwrap { position: relative; /* colunas ocupam a largura inteira da tela; tabs/toolbar acima ficam na largura normal de .ora-main (nao inclusos neste breakout) */ width: 100vw; margin-left: calc(50% - 50vw); } .ora-kb-scrollwrap::before, .ora-kb-scrollwrap::after { content: ''; position: absolute; top: 0; bottom: 12px; /* nao cobre a scrollbar */ width: 40px; pointer-events: none; opacity: 0; transition: opacity .15s ease; z-index: 2; } .ora-kb-scrollwrap::before { left: 0; background: linear-gradient(to right, var(--bg, #0A0B1F), transparent); } .ora-kb-scrollwrap::after { right: 0; background: linear-gradient(to left, var(--bg, #0A0B1F), transparent); } .ora-kb-scrollwrap.can-scroll-left::before { opacity: 1; } .ora-kb-scrollwrap.can-scroll-right::after { opacity: 1; } .ora-kanban { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 16px; margin-top: 14px; align-items: start; overflow-x: auto; overflow-y: visible; padding-bottom: 12px; align-items: stretch; /* gutter no inicio/fim da lista rolavel — .ora-kb-scrollwrap (pai) e 100vw, entao em repouso (scrollLeft=0) a 1a coluna deve alinhar com o padding do header/toolbar. Mas .ora-main tem max-width:1600px + margin:0 auto, entao em telas > 1600px o toolbar nao fica a var(--pad-page) da borda real da tela, fica a (100vw-1600px)/2 + pad-page. Replica essa mesma conta aqui (senao so alinha em telas <=1600px). Ainda rola ate a borda. */ padding-left: max(var(--pad-page), calc((100vw - 1600px) / 2 + var(--pad-page))); padding-right: max(var(--pad-page), calc((100vw - 1600px) / 2 + var(--pad-page))); } .ora-kanban::-webkit-scrollbar { height: 8px; } .ora-kanban::-webkit-scrollbar-thumb { background: rgba(100,116,139,.4); border-radius: 8px; } .ora-kanban::-webkit-scrollbar-track { background: transparent; } .ora-kanban[hidden] { display: none; } .ora-kanban.is-loading, .ora-kb-list.is-loading { opacity: .5; pointer-events: none; transition: opacity .15s; } .ora-kanban-col { background: var(--surface, #f8f9fa); border-radius: 12px; overflow: hidden; min-height: 500px; display: flex; flex-direction: column; height: calc(100vh - 220px); border: 2px solid transparent; transition: border-color .15s, background .15s; flex: 0 0 300px; min-width: 300px; } [data-theme="dark"] .ora-kanban-col { background: #1e293b; } .ora-kanban-col.is-dropzone { border-color: var(--accent, #4338ca); background: rgba(67,56,202,.06); } [data-theme="dark"] .ora-kanban-col.is-dropzone { background: rgba(99,102,241,.12); } .ora-kanban-col-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-weight: 700; font-size: 0.8rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; flex: 0 0 auto; } .ora-kanban-col-header .kbh-count { background: rgba(255,255,255,0.25); border-radius: 20px; padding: 2px 10px; font-size: 0.8rem; font-weight: 700; } .ora-kanban-col .kbh-shown { padding: 4px 16px; font-size: 0.68rem; font-weight: 600; letter-spacing: .03em; color: #64748b; background: rgba(100,116,139,.08); border-bottom: 1px solid rgba(100,116,139,.12); flex: 0 0 auto; } .ora-kanban-col .kbh-shown[hidden] { display: none; } .ora-kanban-col--open .ora-kanban-col-header { background: #3b82f6; } .ora-kanban-col--progress .ora-kanban-col-header { background: #8b5cf6; } .ora-kanban-col--wait .ora-kanban-col-header { background: #f59e0b; } .ora-kanban-col--hold .ora-kanban-col-header { background: #64748b; } .ora-kanban-cards { padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; overflow-y: auto; flex: 1 1 auto; scrollbar-width: thin; scrollbar-color: rgba(100,116,139,.5) transparent; } .ora-kanban-cards::-webkit-scrollbar { width: 8px; } .ora-kanban-cards::-webkit-scrollbar-thumb { background: rgba(100,116,139,.4); border-radius: 8px; } .ora-kanban-cards::-webkit-scrollbar-track { background: transparent; } .ora-kanban-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; background: var(--bg, #fff); border-radius: 8px; padding: 14px 52px 14px 14px; color: inherit; cursor: grab; box-shadow: 0 1px 4px rgba(0,0,0,.07); border-left: 4px solid transparent; transition: box-shadow .15s, transform .1s, opacity .1s; min-height: 110px; flex-shrink: 0; overflow: hidden; } [data-theme="dark"] .ora-kanban-card { background: #0f172a; } .ora-kanban-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.13); transform: translateY(-1px); } .ora-kanban-card:active { cursor: grabbing; } .ora-kanban-card.is-dragging { opacity: .45; box-shadow: 0 8px 20px rgba(0,0,0,.2); } .ora-kanban-card.is-crit { box-shadow: 0 0 0 1px rgba(239,68,68,.4), 0 1px 4px rgba(0,0,0,.07); } .ora-kanban-card--p0 { border-left-color: #ef4444; } .ora-kanban-card--p1 { border-left-color: #f59e0b; } .ora-kanban-card--p2 { border-left-color: #3b82f6; } .ora-kanban-card--p3 { border-left-color: #94a3b8; } .kbc-open { position: absolute; top: 8px; right: 8px; color: var(--text-muted, #94a3b8); font-size: .72rem; padding: 3px; border-radius: 5px; text-decoration: none; opacity: 0; transition: opacity .15s, color .15s; } .ora-kanban-card:hover .kbc-open { opacity: 1; } .kbc-open:hover { color: var(--accent, #4338ca); background: rgba(67,56,202,.1); } .kbc-open { right: 30px; } .kbc-edit { position: absolute; top: 8px; right: 8px; color: var(--text-muted, #94a3b8); font-size: .72rem; padding: 3px 4px; border-radius: 5px; border: 0; background: transparent; cursor: pointer; opacity: .55; transition: opacity .15s, color .15s, background .15s; } .ora-kanban-card:hover .kbc-edit { opacity: 1; } .kbc-edit:hover { color: var(--accent, #4338ca); background: rgba(67,56,202,.1); } /* Botao "sair da sprint" (admin/sprints.php) — mesmo padrao visual de .kbc-open/ .kbc-edit, posicionado mais a esquerda para nao sobrepor os dois existentes. */ .kbc-leave-sprint { position: absolute; top: 8px; right: 52px; color: var(--text-muted, #94a3b8); font-size: .72rem; padding: 3px 4px; border-radius: 5px; border: 0; background: transparent; cursor: pointer; opacity: .55; transition: opacity .15s, color .15s, background .15s; } .ora-kanban-card:hover .kbc-leave-sprint { opacity: 1; } .kbc-leave-sprint:hover { color: #dc2626; background: rgba(220,38,38,.1); } .kbc-track { font-size: 0.7rem; font-weight: 700; letter-spacing: .05em; color: var(--text-muted, #6b7280); margin-bottom: 4px; } .kbc-fire { color: #ef4444; margin-left: 3px; } .kbc-subject { font-size: 0.85rem; font-weight: 600; color: var(--text, #1e293b); line-height: 1.3; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-theme="dark"] .kbc-subject { color: #e2e8f0; } .kbc-sys { font-size: .72rem; color: var(--text-muted, #6b7280); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kbc-sys i { font-size: .65rem; opacity: .7; } .kbc-meta { font-size: 0.72rem; color: var(--text-muted, #6b7280); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .kbc-meta i { font-size: .65rem; } .kbc-who { display: inline-flex; align-items: center; gap: 4px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kbc-age { display: inline-flex; align-items: center; gap: 4px; } .kbc-badge { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 0.68rem; font-weight: 700; background: #e2e8f0; color: #475569; } .kbc-badge--crit { background: #fee2e2; color: #dc2626; } .kbc-badge--high { background: #fef3c7; color: #d97706; } .ora-kanban-empty { display: none; margin: auto; padding: 24px 14px; text-align: center; font-size: 0.92rem; font-weight: 600; color: var(--text-muted, #94a3b8); } /* Toast de feedback do drag */ .ora-kb-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: #1e293b; color: #fff; padding: 10px 18px; border-radius: 8px; font-size: .82rem; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 9999; } .ora-kb-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); } .ora-kb-toast--ok { background: #16a34a; } .ora-kb-toast--err { background: #dc2626; } /* ── Barra de filtros avançada ── */ .ora-kanban-filters { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 18px; margin-top: 12px; padding: 16px; background: var(--surface, #f8f9fa); border-radius: 12px; border: 1px solid var(--border, #e2e8f0); } [data-theme="dark"] .ora-kanban-filters { background: #1e293b; border-color: #334155; } .ora-kanban-filters[hidden] { display: none; } .ora-kb-group { display: flex; flex-direction: column; gap: 6px; flex: 0 1 180px; min-width: 0; } .ora-kb-group[data-filter-group="prio"], .ora-kb-group[data-filter-group="sys"] { flex: 1 1 260px; flex-direction: row; flex-wrap: wrap; align-items: center; } .ora-kb-group[data-filter-group="prio"] .ora-kb-group-label, .ora-kb-group[data-filter-group="sys"] .ora-kb-group-label { flex: 1 0 100%; } .ora-kb-group-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted, #64748b); } .ora-kb-daterange { display: flex; flex-direction: column; gap: 4px; } .ora-kb-daterange .form-control { width: 100%; min-width: 0; } .ora-kb-daterange-sep { display: none; } .ora-kanban-filters .form-control { font-size: .82rem; padding: 6px 10px; } .ora-kb-selectwrap { position: relative; display: flex; align-items: center; } .ora-kb-selectwrap > i:first-child { position: absolute; left: 10px; font-size: .75rem; color: var(--text-muted, #94a3b8); pointer-events: none; } .ora-kb-selectwrap .form-control, .ora-kb-selectwrap .ora-kb-select { padding-left: 28px; width: 100%; } #kbFiltToggle.is-on { background: var(--accent, #4338ca); color: #fff !important; border-color: var(--accent, #4338ca); } /* ── Listagem (Ver Lista) ── */ .ora-kb-list { margin-top: 14px; } .ora-kb-list[hidden] { display: none; } .ora-kb-list-scroll { overflow-x: auto; border-radius: 12px; border: 1px solid var(--border, #e2e8f0); } [data-theme="dark"] .ora-kb-list-scroll { border-color: #334155; } .ora-kb-table { width: 100%; border-collapse: collapse; font-size: .82rem; background: var(--bg, #fff); } [data-theme="dark"] .ora-kb-table { background: #0f172a; } .ora-kb-table thead th { text-align: left; padding: 10px 12px; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted, #64748b); background: var(--surface, #f1f5f9); border-bottom: 1px solid var(--border, #e2e8f0); white-space: nowrap; } [data-theme="dark"] .ora-kb-table thead th { background: #1e293b; border-color: #334155; } .ora-kb-table tbody td { padding: 9px 12px; border-bottom: 1px solid var(--border, #eef2f6); color: var(--text, #1e293b); } [data-theme="dark"] .ora-kb-table tbody td { border-color: #1e293b; color: #e2e8f0; } .ora-kb-table tbody tr:nth-child(even) { background: rgba(100,116,139,.04); } .ora-kb-table tbody tr:hover { background: rgba(67,56,202,.06); } .ora-kb-table .kbl-id { font-weight: 700; white-space: nowrap; } .ora-kb-table .kbl-subj { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ora-kb-table .kbl-dt { white-space: nowrap; color: var(--text-muted, #64748b); } .ora-kb-table .kbl-muted { color: var(--text-muted, #94a3b8); } .ora-btn-sm { padding: 4px 8px; font-size: .75rem; } .ora-kb-list-empty { padding: 24px; text-align: center; color: var(--text-muted, #94a3b8); font-size: .85rem; } .ora-kb-list-empty[hidden] { display: none; } /* ── FICHAS TÉCNICAS ── */ .ora-fichas-wrap { margin-top: 8px; } /* Filtros */ .ora-fichas-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; padding: 16px 20px; margin-bottom: 18px; background: linear-gradient(180deg, var(--bg, #fff), var(--surface, #f8f9fa)); border: 1px solid var(--border, #e2e8f0); border-radius: 16px; box-shadow: 0 1px 3px rgba(15,23,42,.04); } [data-theme="dark"] .ora-fichas-filters { background: linear-gradient(180deg, #0f172a, #1e293b); border-color: #334155; } .ora-fichas-filters .ora-btn { align-self: flex-end; } .ora-ff-field { display: flex; flex-direction: column; gap: 5px; } .ora-ff-field > label { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted, #94a3b8); margin: 0; } .ora-ff-field .form-control { min-width: 150px; } .ora-ff-search { flex: 1 1 240px; } .ora-ff-searchbox { position: relative; } .ora-ff-searchbox i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted, #94a3b8); font-size: .8rem; pointer-events: none; } .ora-ff-searchbox .form-control { width: 100%; padding-left: 32px; } .ora-ff-actions { margin-left: auto; } /* Tabela */ .ora-table-scroll { overflow-x: auto; border-radius: 14px; border: 1px solid var(--border, #e2e8f0); } [data-theme="dark"] .ora-table-scroll { border-color: #334155; } .ora-table { border-collapse: collapse; width: 100%; background: var(--bg, #fff); font-size: .82rem; } [data-theme="dark"] .ora-table { background: #0f172a; } .ora-table thead th { text-align: left; padding: 12px 14px; white-space: nowrap; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted, #6b7280); background: var(--surface, #f8f9fa); border-bottom: 2px solid var(--border, #e2e8f0); } [data-theme="dark"] .ora-table thead th { background: #1e293b; border-color: #334155; color: #94a3b8; } .ora-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border, #eef2f6); color: var(--text, #334155); vertical-align: middle; } [data-theme="dark"] .ora-table tbody td { color: #cbd5e1; border-color: #1e293b; } .ora-table tbody tr { transition: background .12s; } .ora-table tbody tr:hover { background: rgba(67,56,202,.04); } [data-theme="dark"] .ora-table tbody tr:hover { background: rgba(99,102,241,.08); } .ora-table tbody tr.is-selected { background: rgba(22,163,74,.1); } .ora-fichas .ff-id { font-weight: 700; color: var(--text-muted, #94a3b8); white-space: nowrap; } .ora-fichas .ff-flag { text-align: center; } .ff-muted { color: var(--text-muted, #94a3b8); } .ff-desc { color: var(--text-muted, #6b7280); max-width: 260px; } .ff-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; background: rgba(59,130,246,.12); color: #2563eb; } /* Badges de status (Imp/Ger/Fin) */ .ff-badge { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: .7rem; } .ff-badge--ok { background: #dcfce7; color: #16a34a; } .ff-badge--off { background: var(--surface, #f1f5f9); color: #cbd5e1; } [data-theme="dark"] .ff-badge--off { background: #1e293b; color: #475569; } .ff-play { color: #6366f1; font-size: 1.05rem; text-decoration: none; transition: transform .1s, color .12s; display: inline-block; } .ff-play:hover { color: #4338ca; transform: scale(1.15); } /* Botões de ação ícone */ .ff-actions { white-space: nowrap; } .ff-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; background: var(--bg, #fff); color: var(--text-muted, #64748b); cursor: pointer; text-decoration: none; font-size: .8rem; transition: all .12s; } [data-theme="dark"] .ff-iconbtn { background: #0f172a; border-color: #334155; color: #94a3b8; } .ff-iconbtn:hover { border-color: var(--accent, #4338ca); color: var(--accent, #4338ca); transform: translateY(-1px); } /* Rodapé de totais */ .ora-fichas-foot { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: flex-end; margin-top: 14px; padding: 14px 18px; border-radius: 12px; background: var(--surface, #f8f9fa); border: 1px solid var(--border, #e2e8f0); font-size: .82rem; color: var(--text, #334155); } [data-theme="dark"] .ora-fichas-foot { background: #1e293b; border-color: #334155; color: #cbd5e1; } .ora-fichas-foot-item { display: inline-flex; align-items: center; gap: 8px; } .ora-fichas-foot-item i { color: var(--accent, #4338ca); } .ora-fichas-foot-item--total { margin-left: auto; } .ora-fichas-foot-item strong { color: var(--text, #1e293b); } [data-theme="dark"] .ora-fichas-foot-item strong { color: #fff; } /* Estado vazio */ .ora-fichas-empty { text-align: center; padding: 56px 20px; color: var(--text-muted, #94a3b8); } .ora-fichas-empty i { font-size: 2.4rem; opacity: .5; margin-bottom: 12px; display: block; } .ora-fichas-empty h3 { margin: 0 0 6px; color: var(--text, #334155); font-size: 1.05rem; } [data-theme="dark"] .ora-fichas-empty h3 { color: #e2e8f0; } .ora-fichas-empty p { margin: 0 0 16px; font-size: .85rem; } /* Paginação */ .ora-pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 20px 0; } .ora-page { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; border-radius: 8px; font-size: .8rem; font-weight: 600; text-decoration: none; color: var(--text, #475569); background: var(--bg, #fff); border: 1px solid var(--border, #e2e8f0); transition: all .12s; } [data-theme="dark"] .ora-page { background: #0f172a; border-color: #334155; color: #cbd5e1; } .ora-page:hover { border-color: var(--accent, #4338ca); color: var(--accent, #4338ca); text-decoration: none; } .ora-page.is-current { background: var(--accent, #4338ca); border-color: var(--accent, #4338ca); color: #fff; } /* ── NOVA FICHA (form) ── */ .ora-ficha-form { max-width: 1320px; margin: 0 auto; padding: 0 8px 32px; } .ora-ficha-form > .row-fluid > h2 { display: none; } /* título já está no header ORA */ .ora-ficha-form > .row-fluid > p[align="center"] { text-align: right; color: var(--text-muted, #94a3b8); font-size: .85rem; margin: 0 0 6px; } .ora-ficha-printwrap { float: none !important; padding: 0 !important; display: flex; justify-content: flex-end; } /* dois painéis (form + últimos chamados) viram cards flexíveis e maiores */ .ora-ficha-form .col-md-6 { background: var(--bg, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 18px; padding: 32px 36px; margin-bottom: 24px; box-shadow: 0 2px 8px rgba(15,23,42,.06); } [data-theme="dark"] .ora-ficha-form .col-md-6 { background: #0f172a; border-color: #334155; } /* linhas label + campo, centralizadas verticalmente, mais espaçadas */ .ora-ficha-form .row { margin-bottom: 20px; align-items: center; } .ora-ficha-form .row:last-child { margin-bottom: 0; } .ora-ficha-form .col-md-4.text-right { font-weight: 700; font-size: .95rem; color: var(--text, #334155); padding-top: 0; } [data-theme="dark"] .ora-ficha-form .col-md-4.text-right { color: #cbd5e1; } .ora-ficha-form .important { color: #ef4444; } /* controles maiores, ocupam a largura da coluna */ .ora-ficha-form .form-control { width: 100%; max-width: 100%; height: auto; min-height: 48px; font-size: 1rem; padding: 10px 14px; border-radius: 10px; } .ora-ficha-form select.form-control { min-width: 0; } .ora-ficha-form textarea.form-control { min-height: 110px; } .ora-ficha-form #ticketid { width: auto !important; min-width: 140px; font-size: 1.05rem; } /* botão enviar grande e centralizado */ .ora-ficha-form .col-md-12.text-center { text-align: center; } .ora-ficha-form #botaoenviar { min-width: 300px; padding: 15px 36px; font-size: 1.05rem; border-radius: 12px; } /* painel últimos chamados */ .ora-ficha-form #PrimeiroConteudo { height: auto !important; max-height: 460px; margin-top: 12px; border: 1px solid var(--border, #e2e8f0); border-radius: 12px; background: var(--surface, #f8f9fa); font-size: .95rem; } [data-theme="dark"] .ora-ficha-form #PrimeiroConteudo { background: #1e293b; border-color: #334155; } .ora-ficha-form .linha_ult_chamado { padding: 9px 8px !important; background: transparent !important; border-bottom: 1px solid var(--border, #eef2f6) !important; } [data-theme="dark"] .ora-ficha-form .linha_ult_chamado { border-color: #1e293b !important; } @media (max-width: 991px) { .ora-ficha-form .col-md-4.text-right { text-align: left !important; margin-bottom: 6px; } .ora-ficha-form #botaoenviar { width: 100%; min-width: 0; } } /* ── MODAIS (Bootstrap modal sem Bootstrap CSS: jquery.confirm, manage_city, agendador...) ── */ .hide { display: none !important; } /* base: escondida até o JS (ou data-toggle) abrir; só confirmation-modal é forçada */ .modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10050; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .modal:not(.in):not(.confirmation-modal) { display: none; } .modal.in, .confirmation-modal.modal { display: block; } .confirmation-modal.modal { display: block !important; animation: ora-modal-fade .15s ease-out; } /* backdrop do Bootstrap (div separada) + fallback de fundo na própria confirmation-modal */ .modal-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10040; background: rgba(15,23,42,.55); } .modal-backdrop.in { opacity: 1; } .confirmation-modal.modal { background: rgba(15,23,42,.55); } @keyframes ora-modal-fade { from { opacity: 0; } to { opacity: 1; } } .modal-dialog { position: relative; width: auto; max-width: 520px; margin: 7vh auto; padding: 0 14px; z-index: 10051; animation: ora-modal-pop .18s ease-out; } @keyframes ora-modal-pop { from { transform: translateY(-14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .modal-content { position: relative; background: var(--bg, #fff); color: var(--text, #1e293b); border: 1px solid var(--border, #e2e8f0); border-radius: 16px; box-shadow: 0 24px 60px rgba(15, 23, 42, .35); overflow: hidden; } [data-theme="dark"] .modal-content { background: #0f172a; color: #e2e8f0; border-color: #334155; } .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border, #e2e8f0); } [data-theme="dark"] .modal-header { border-color: #334155; } .modal-title { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.3; } .modal-header .close { border: 0; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--text-muted, #94a3b8); opacity: 1; padding: 0 4px; order: 2; } .modal-header .close:hover { color: var(--text, #1e293b); } [data-theme="dark"] .modal-header .close:hover { color: #fff; } .modal-body { padding: 22px; font-size: .92rem; line-height: 1.55; } .modal-body h4 { margin: 12px 0 0; font-size: .95rem; } .modal-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--border, #e2e8f0); } [data-theme="dark"] .modal-footer { border-color: #334155; } /* botões dentro da modal (Bootstrap .btn sem Bootstrap CSS) */ .modal .btn, .confirmation-modal .btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 18px; border-radius: 10px; border: 1px solid transparent; font-size: .88rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: filter .12s, background .12s, border-color .12s; } .modal .btn:hover, .confirmation-modal .btn:hover { filter: brightness(.95); } .modal .btn-success, .confirmation-modal .btn-success { background: #16a34a; color: #fff; } .modal .btn-danger, .confirmation-modal .btn-danger { background: #dc2626; color: #fff; } .modal .btn-primary, .confirmation-modal .btn-primary { background: var(--accent, #4338ca); color: #fff; } .modal .btn-default, .confirmation-modal .btn-default { background: var(--surface, #f1f5f9); color: var(--text, #334155); border-color: var(--border, #e2e8f0); } [data-theme="dark"] .modal .btn-default, [data-theme="dark"] .confirmation-modal .btn-default { background: #1e293b; color: #cbd5e1; border-color: #334155; } @media (max-width: 520px) { .modal-dialog { margin: 4vh auto; } .modal-footer { justify-content: stretch; } .modal-footer .btn { flex: 1 1 100%; } } /* ── Responsividade global (todas as telas admin) ── */ @media (max-width: 768px) { .ora-admin-page-wrap { padding-left: 12px; padding-right: 12px; } .ora-admin-header { flex-direction: column; align-items: flex-start; gap: 10px; } .ora-admin-title { font-size: 1.35rem; } .ora-admin-header-actions { width: 100%; } .ora-admin-header-actions .ora-btn { width: 100%; justify-content: center; } .ora-fichas-filters, .ora-kanban-toolbar { gap: 10px; } .ora-fichas-filters .ora-ff-field, .ora-fichas-filters .form-control { width: 100%; } .ora-ff-actions { margin-left: 0; width: 100%; } .ora-ff-actions .ora-btn { width: 100%; justify-content: center; } } @media (max-width: 600px) { .ora-kanban-toolbar > * { flex: 1 1 100%; } .ora-kb-count { margin-left: 0; } } /* ===== Kanban: quadros data-driven (colunas por etapa + ações) ===== */ /* Coluna de etapa (renderizada com --col inline) */ .ora-kanban-col--stage { border-top: 3px solid var(--col, #3b82f6); background: var(--surface, #f8f9fa); border-radius: 12px; overflow: hidden; min-height: 120px; display: flex; flex-direction: column; height: calc(100vh - 300px); border: 2px solid transparent; transition: border-color .15s, background .15s; } [data-theme="dark"] .ora-kanban-col--stage { background: #1e293b; } .ora-kanban-col--stage:hover { border-color: var(--col, #3b82f6); background: rgba(59, 130, 246, 0.04); } [data-theme="dark"] .ora-kanban-col--stage:hover { background: rgba(99, 102, 241, 0.08); } /* Header da coluna de etapa — herda cor da etapa */ .ora-kanban-col--stage .ora-kanban-col-header { background: var(--col, #3b82f6); display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-weight: 700; font-size: 0.8rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; flex: 0 0 auto; } .ora-kanban-col--stage .ora-kanban-col-header .kbh-count { background: rgba(255, 255, 255, 0.25); border-radius: 20px; padding: 2px 10px; font-size: 0.8rem; font-weight: 700; } /* Cards dentro da coluna de etapa */ .ora-kanban-col--stage .ora-kanban-cards { padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; overflow-y: auto; flex: 1 1 auto; scrollbar-width: thin; scrollbar-color: rgba(100, 116, 139, .5) transparent; } .ora-kanban-col--stage .ora-kanban-cards::-webkit-scrollbar { width: 8px; } .ora-kanban-col--stage .ora-kanban-cards::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .4); border-radius: 8px; } .ora-kanban-col--stage .ora-kanban-cards::-webkit-scrollbar-track { background: transparent; } /* Coluna de ações (narrower, distinct style) */ .ora-kanban-col--actions { background: var(--bg-elev, #ede0f8); border: 1px solid var(--border, #e2e8f0); border-radius: 12px; overflow: hidden; min-height: 120px; display: flex; flex-direction: column; min-width: 160px; max-width: 200px; max-height: calc(100vh - 300px); transition: border-color .15s, background .15s; } [data-theme="dark"] .ora-kanban-col--actions { background: #1e293b; } .ora-kanban-col--actions:hover { border-color: var(--accent-bright, #3989bf); } /* Header da coluna de ações */ .ora-kanban-col--actions .ora-kanban-col-header { background: var(--accent, #202e83); display: flex; align-items: center; justify-content: center; padding: 12px 16px; font-weight: 700; font-size: 0.8rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; flex: 0 0 auto; text-align: center; } /* Lista de botões de ação */ .ora-kanban-action-list { padding: 12px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1 1 auto; scrollbar-width: thin; scrollbar-color: rgba(100, 116, 139, .5) transparent; } .ora-kanban-action-list::-webkit-scrollbar { width: 6px; } .ora-kanban-action-list::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .4); border-radius: 6px; } .ora-kanban-action-list::-webkit-scrollbar-track { background: transparent; } /* Botão de ação individual */ .ora-kb-action-btn { width: 100%; padding: 10px 12px; border-radius: var(--radius-sm, 10px); background: var(--col, #22c55e); color: #fff; border: none; font-size: 12.5px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background .15s, transform .1s, box-shadow .15s; text-decoration: none; white-space: nowrap; line-height: 1; } .ora-kb-action-btn:hover { background: color-mix(in oklab, var(--col, #22c55e) 85%, #000); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2); } .ora-kb-action-btn:active { transform: translateY(0); } .ora-kb-action-btn i { font-size: 14px; flex-shrink: 0; } /* Seletor de quadro (dropdown no topo) */ .ora-kb-boardsel { appearance: none; -webkit-appearance: none; -moz-appearance: none; height: auto; line-height: 1.2; padding: 8px 32px 8px 12px; border-radius: var(--radius-sm, 10px); cursor: pointer; font-size: 13px; font-weight: 600; min-width: 180px; color: var(--text, #334155); background: var(--card, #fff); border: 1.5px solid var(--border, #e2e8f0); transition: border-color .15s, box-shadow .15s, background .15s; position: relative; } [data-theme="dark"] .ora-kb-boardsel { color: #e2e8f0; background: #0f172a; border-color: #334155; } .ora-kb-boardsel:hover { border-color: var(--accent-bright, #3989bf); background: var(--card-hover, #f8faff); } [data-theme="dark"] .ora-kb-boardsel:hover { background: #1e293b; } .ora-kb-boardsel:focus { outline: none; border-color: var(--accent-bright, #3989bf); box-shadow: 0 0 0 3px var(--accent-soft, rgba(57, 137, 191, 0.18)); } /* Dropdown arrow customizado */ .ora-kb-boardsel::after { content: ''; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; background: var(--text-muted, #6b7280); clip-path: polygon(0 0, 100% 0, 50% 100%); pointer-events: none; } /* ── Profile page ─────────────────────────────────────── */ .ora-profile-user { font-size:15px; margin:0 0 20px; color:var(--text-muted); } .ora-profile-section { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:20px 24px; margin-bottom:20px; } .ora-profile-section-title { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--border); } .ora-profile-row { display:flex; align-items:flex-start; gap:16px; padding:8px 0; border-bottom:1px solid var(--border); } .ora-profile-row:last-child { border-bottom:none; } .ora-profile-label { min-width:180px; font-size:13px; font-weight:500; color:var(--text); padding-top:7px; text-align:right; flex-shrink:0; } .ora-profile-field { flex:1; } .ora-profile-field .form-control { max-width:360px; } .ora-profile-field textarea.form-control { max-width:480px; } .ora-profile-checks { display:flex; flex-direction:column; gap:4px; } .ora-profile-check { font-size:13px; display:flex; align-items:center; gap:6px; } .ora-profile-actions { padding:8px 0 24px; } /* ── Agendador (grid) ─────────────────────────────────────────── */ .ora-ag-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; background:var(--card); border:1px solid var(--border); border-radius:8px; padding:12px 16px; margin-bottom:16px; } .ora-ag-toolbar-tabs { display:flex; flex-wrap:wrap; gap:6px; } .ora-ag-badge { display:inline-block; min-width:20px; padding:1px 7px; margin-left:4px; font-size:12px; font-weight:600; line-height:18px; text-align:center; color:#fff; background:var(--text-muted); border-radius:10px; } .ora-ag-badge--danger { background:#dc2626; } #form-filtros { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:14px 16px; margin-bottom:16px; } #form-filtros .form-inline { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; } #form-filtros .form-group { margin:0; } .ora-ag-empty { text-align:center; padding:48px 16px; color:var(--text-muted); } .ora-ag-empty i { font-size:42px; opacity:.5; display:block; margin-bottom:12px; } .ora-ag-empty p { font-size:15px; margin:0; } #tabela_dados { background:var(--card); border:1px solid var(--border); border-radius:8px; } #tabela_dados > thead > tr > th { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); background:var(--surface2); border-bottom:1px solid var(--border); } /* ── Agendador: modal Novo Agendamento ────────────────────────── */ /* jQuery UI dialog chrome → ORA */ .ui-dialog:has(#criar-agenda), .ui-dialog.ora-ag-dialog { border:none !important; border-radius:14px !important; padding:0 !important; box-shadow:0 24px 60px rgba(15,23,42,.28) !important; overflow:hidden; display:flex; flex-direction:column; max-width:880px; } .ui-dialog .ui-dialog-titlebar { background:var(--accent-deep, #1e293b); color:#fff; border:none; border-radius:0; padding:16px 22px; margin:0; } .ui-dialog .ui-dialog-title { font-size:17px; font-weight:700; } .ui-dialog .ui-dialog-titlebar-close { background:rgba(255,255,255,.15); border:none; border-radius:8px; width:30px; height:30px; right:18px; margin-top:-15px; } .ui-dialog .ui-dialog-titlebar-close:hover { background:rgba(255,255,255,.3); } .ui-dialog #criar-agenda.ui-dialog-content { padding:0 !important; background:var(--card); flex:1 1 auto; overflow:auto; } #criar-agenda form { display:flex; flex-direction:column; min-height:100%; } .ora-modal-body { padding:20px 22px; } .ora-fsec { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:16px 18px; margin-bottom:14px; } .ora-fsec-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text); margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; } .ora-fsec-title i { color:var(--accent-deep, #6366f1); font-size:14px; } .ora-fgrid { display:grid; gap:14px 18px; } .ora-fgrid-2 { grid-template-columns:repeat(2, 1fr); } .ora-fgrid-3 { grid-template-columns:repeat(3, 1fr); } .ora-fgrid-data { grid-template-columns:repeat(2, 1fr); } .ora-field { display:flex; flex-direction:column; min-width:0; } .ora-field-span2 { grid-column:1 / -1; } .ora-field-label { font-size:12.5px; font-weight:600; color:var(--text-muted); margin-bottom:6px; text-transform:none; letter-spacing:0; } .ora-field .form-control { width:100%; } .ora-field textarea.form-control { resize:vertical; min-height:64px; } /* multiselect dentro do modal ocupa largura toda */ #criar-agenda .btn-group, #criar-agenda .multiselect-native-select { width:100%; } .ora-check { font-size:13px; font-weight:500; color:var(--text); margin-top:8px; display:flex; align-items:center; gap:6px; cursor:pointer; } .ora-check input, .ora-radio input { margin:0; } .ora-radio-group { display:flex; gap:8px; } .ora-radio { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; font-size:13px; font-weight:500; padding:8px 10px; cursor:pointer; border:1px solid var(--border); border-radius:8px; background:var(--card); margin:0; transition:all .12s ease; } .ora-radio:hover { border-color:var(--accent-deep, #6366f1); } .ora-car-card { border:1px solid var(--border); border-radius:10px; padding:10px; background:var(--card); } .ora-car-pick { display:flex; align-items:center; gap:8px; font-size:13px; margin:0 0 8px; cursor:pointer; } .ora-car-pick img { max-height:34px; } .ora-car-list { height:96px; overflow-y:auto; font-size:11px; color:var(--text-muted); border-top:1px dashed var(--border); padding-top:6px; } .ora-car-row { padding:4px 0; border-bottom:1px solid var(--border); } .ora-car-row span { color:var(--text); } .ora-car-empty { color:var(--text-muted); } .ora-total { margin-top:14px; text-align:right; font-size:16px; font-weight:700; color:var(--text); padding-top:12px; border-top:1px solid var(--border); } .ora-modal-footer { position:sticky; bottom:0; z-index:2; display:flex; justify-content:flex-end; gap:10px; padding:14px 22px; background:var(--card); border-top:1px solid var(--border); } /* backdrop translúcido cobrindo o viewport inteiro */ .ui-widget-overlay { position:fixed !important; top:0 !important; left:0 !important; width:100vw !important; height:100vh !important; background:rgba(15,23,42,.5) !important; opacity:1 !important; background-image:none !important; z-index:9000 !important; } .ui-dialog.ora-ag-dialog { position:fixed !important; top:50% !important; left:50% !important; transform:translate(-50%, -50%) !important; margin:0 !important; z-index:9001 !important; } @media (max-width: 720px) { .ora-fgrid-2, .ora-fgrid-3, .ora-fgrid-data { grid-template-columns:1fr; } .ora-radio-group { flex-direction:column; } } /* ===== LOGIN / RECOVERY PAGES ===== */ .ora-login-wrap { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #101140 0%, #172163 45%, #202E83 100%); padding: 24px; overflow-y: auto; z-index: 9999; } .ora-login-card { background: var(--card, #fff); border-radius: 20px; box-shadow: 0 24px 64px rgba(0,0,0,0.35); width: 100%; max-width: 420px; padding: 48px 40px 40px; } .ora-login-brand { text-align: center; margin-bottom: 32px; } .ora-login-brand .brand-logo { max-width: 200px; height: auto; margin-bottom: 12px; display: block; margin-left: auto; margin-right: auto; } .ora-login-brand h1 { font-size: 20px; font-weight: 700; color: var(--text, #101140); margin: 0 0 4px; letter-spacing: -0.3px; } .ora-login-brand p { font-size: 13px; color: var(--text-muted, #4D4D5C); margin: 0; } .ora-login-msgs { margin-bottom: 20px; } .ora-login-field { margin-bottom: 18px; } .ora-login-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted, #4D4D5C); margin-bottom: 7px; text-transform: uppercase; letter-spacing: 0.5px; } .ora-login-input-wrap { position: relative; } .ora-login-input-wrap > i.fa-solid { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-dim, #8A90AB); font-size: 14px; pointer-events: none; } .ora-login-input-wrap input, .ora-login-input-wrap select { width: 100%; padding: 11px 14px 11px 38px; border: 1.5px solid var(--border, #E2E5EF); border-radius: 10px; font-size: 14px; color: var(--text, #101140); background: var(--bg-elev, #F4F6FB); outline: none; transition: border-color 0.2s, box-shadow 0.2s; font-family: inherit; -webkit-appearance: none; appearance: none; } .ora-login-input-wrap input:focus, .ora-login-input-wrap select:focus { border-color: #3989BF; box-shadow: 0 0 0 3px rgba(57,137,191,0.18); background: #fff; } .ora-login-input-wrap input.isError, .ora-login-input-wrap select.isError { border-color: var(--negative, #D8404F); box-shadow: 0 0 0 3px rgba(216,64,79,0.15); } .ora-login-remember { margin-bottom: 22px; font-size: 13px; color: var(--text-muted, #4D4D5C); } .ora-login-remember > label { display: flex; align-items: center; gap: 8px; cursor: pointer; } .ora-login-remember input[type="checkbox"] { width: 16px; height: 16px; accent-color: #202E83; } .ora-login-radios label { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; cursor: pointer; } .ora-login-btn { width: 100%; padding: 13px; background: linear-gradient(135deg, #172163, #202E83); color: #fff; border: none; border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer; letter-spacing: 0.3px; transition: opacity 0.2s, transform 0.1s; font-family: inherit; } .ora-login-btn:hover { opacity: 0.9; } .ora-login-btn:active { transform: translateY(1px); } .ora-login-footer { text-align: center; margin-top: 20px; font-size: 13px; color: var(--text-muted, #4D4D5C); } .ora-login-footer a { color: #3989BF; font-weight: 600; text-decoration: none; } .ora-login-footer a:hover { text-decoration: underline; } /* ===== MANAGE USERS ===== */ .ora-users-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:16px; } .ora-users-search { display:flex; align-items:center; gap:8px; background:var(--card); border:1.5px solid var(--border); border-radius:10px; padding:6px 12px; flex:1; min-width:260px; } .ora-users-search i { color:var(--text-dim); font-size:13px; } .ora-users-search input { border:none; outline:none; background:transparent; font-size:14px; color:var(--text); flex:1; font-family:inherit; } .ora-users-filters { display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .ora-filter-chip { padding:5px 14px; border-radius:20px; border:1.5px solid var(--border); font-size:12.5px; font-weight:500; color:var(--text-muted); text-decoration:none; transition:all .15s; background:var(--card); } .ora-filter-chip:hover { border-color:var(--accent-bright); color:var(--accent-bright); } .ora-filter-chip.active { background:var(--accent); border-color:var(--accent); color:#fff; } .ora-btn-sm { padding:6px 14px; font-size:12.5px; } .ora-users-table { width:100%; border-collapse:collapse; } .ora-users-table thead tr { background:var(--bg-elev); } .ora-users-table th { padding:11px 14px; font-size:11.5px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; border-bottom:1.5px solid var(--border); white-space:nowrap; } .ora-users-table td { padding:11px 14px; font-size:13.5px; color:var(--text); border-bottom:1px solid var(--border); vertical-align:middle; } .ora-users-table tbody tr:last-child td { border-bottom:none; } .ora-users-table tbody tr:hover td { background:var(--card-hover); } .ora-users-table .ora-badge { display:inline-block; padding:2px 10px; border-radius:20px; font-size:11.5px; font-weight:700; letter-spacing:.3px; } .ora-badge-green { background:rgba(21,163,110,.15); color:var(--positive); } .ora-badge-gray { background:var(--bg-elev); color:var(--text-dim); } .ora-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:7px; color:var(--text-muted); transition:all .15s; text-decoration:none; } .ora-icon-btn:hover { background:var(--accent-soft); color:var(--accent); } .ora-icon-btn-danger:hover { background:rgba(216,64,79,.12); color:var(--negative); } .ora-pagination { display:flex; align-items:center; gap:4px; padding:12px 0; } .ora-page-btn { display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px; padding:0 8px; border-radius:7px; border:1.5px solid var(--border); font-size:13px; color:var(--text-muted); text-decoration:none; transition:all .15s; background:var(--card); } .ora-page-btn:hover { border-color:var(--accent-bright); color:var(--accent-bright); } .ora-page-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700; } /* ===== SETTINGS PAGE (tabber + status card) ===== */ /* Status info card */ .ora-status-card { background: var(--card, #fff); border: 1px solid var(--border, #E2E5EF); border-radius: 12px; overflow: hidden; margin-bottom: 24px; } .ora-status-card table { width: 100%; border-collapse: collapse; } .ora-status-card table tr td { padding: 10px 16px; border-bottom: 1px solid var(--border, #E2E5EF); font-size: 13px; } .ora-status-card table tr:last-child td { border-bottom: none; } .ora-status-card table tr td:first-child { width: 220px; color: var(--text-muted, #4D4D5C); font-weight: 500; background: var(--bg-elev, #F4F6FB); } /* Section headers inside settings tabs */ span.section { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--brand-indigo, #202E83); padding: 6px 0 10px; margin-top: 8px; border-bottom: 2px solid var(--border, #E2E5EF); margin-bottom: 12px; } /* Tabber → ORA DS pill tabs */ .tabber { background: transparent !important; border: none !important; } .tabbernav { display: flex !important; gap: 6px !important; padding: 0 0 0 0 !important; margin: 0 0 20px 0 !important; border-bottom: 2px solid var(--border, #E2E5EF) !important; list-style: none !important; background: transparent !important; } .tabbernav li { list-style: none !important; margin: 0 !important; padding: 0 !important; } .tabbernav li a { display: inline-block !important; padding: 8px 18px !important; font-size: 13px !important; font-weight: 600 !important; color: var(--text-muted, #4D4D5C) !important; text-decoration: none !important; border-radius: 8px 8px 0 0 !important; border: 1px solid transparent !important; border-bottom: none !important; margin-bottom: -2px !important; background: transparent !important; transition: color .15s, background .15s !important; } .tabbernav li a:hover { color: var(--brand-indigo, #202E83) !important; background: var(--bg-elev, #F4F6FB) !important; } .tabbernav li.tabberactive a { color: var(--brand-indigo, #202E83) !important; background: var(--card, #fff) !important; border-color: var(--border, #E2E5EF) !important; border-bottom-color: var(--card, #fff) !important; } .tabbertab { background: var(--card, #fff) !important; border: 1px solid var(--border, #E2E5EF) !important; border-radius: 0 8px 8px 8px !important; padding: 20px 24px !important; } /* Settings tkt-table inside tabs */ .tabbertab table.tkt-table { border-collapse: collapse; width: 100%; } .tabbertab table.tkt-table tr td { padding: 8px 12px; border-bottom: 1px solid var(--border, #F0F2F8); vertical-align: middle; font-size: 13px; } .tabbertab table.tkt-table tr:last-child td { border-bottom: none; } .tabbertab table.tkt-table tr td:first-child { color: var(--text-muted, #4D4D5C); width: 240px; text-align: right; padding-right: 16px; } /* ===== THEME TOGGLE BUTTON ===== */ .ora-theme-btn { background: none; border: 1px solid var(--border, rgba(255,255,255,.15)); border-radius: 8px; cursor: pointer; font-size: 18px; line-height: 1; padding: 4px 8px; color: var(--text); transition: background .15s, border-color .15s; display: flex; align-items: center; } .ora-theme-btn:hover { background: var(--bg-elev); border-color: var(--accent); } .topbar-right { display: flex; align-items: center; gap: 8px; } /* Kanban — abas de quadro */ .ora-kb-tabs { display:flex; gap:4px; margin:0 0 12px; border-bottom:1px solid var(--border,#e2e8f0); } .ora-kb-tab { padding:8px 18px; font-weight:600; color:var(--text-muted,#64748b); text-decoration:none; border-bottom:2px solid transparent; border-radius:6px 6px 0 0; } .ora-kb-tab:hover { color:var(--text,#334155); background:var(--card-hover,rgba(100,116,139,.08)); } .ora-kb-tab.is-active { color:var(--accent,#2563eb); border-bottom-color:var(--accent,#2563eb); } .ora-kb-tab { cursor:pointer; } /* Kanban — coluna-alvo de transferência entre quadros (drop-only) */ .ora-kanban-col--transfer { flex:0 0 220px; min-width:220px; min-height:500px; background:transparent; border:2px dashed var(--border,#cbd5e1); border-radius:12px; display:flex; flex-direction:column; transition:border-color .15s, background .15s; } .ora-kanban-col--transfer .ora-kb-transfer-head { background:#0ea5e9; color:#fff; justify-content:center; text-align:center; gap:6px; } .ora-kanban-col--transfer.is-dropzone { border-color:#0ea5e9; background:rgba(14,165,233,.08); } [data-theme="dark"] .ora-kanban-col--transfer.is-dropzone { background:rgba(14,165,233,.14); } .ora-kb-transfer-drop { flex:1 1 auto; display:flex; align-items:center; justify-content:center; overflow:hidden; } .ora-kb-transfer-hint { display:flex; flex-direction:column; align-items:center; gap:8px; padding:20px 14px; text-align:center; color:#64748b; pointer-events:none; } .ora-kb-transfer-hint i { font-size:26px; color:#0ea5e9; } .ora-kb-transfer-hint span { font-weight:700; font-size:.9rem; color:#334155; } [data-theme="dark"] .ora-kb-transfer-hint span { color:#e2e8f0; } .ora-kb-transfer-hint small { font-size:.72rem; color:#94a3b8; } /* ============ Sprints v2 ============ */ .ora-sp-card { background:var(--surface,#f8f9fa); border:1px solid var(--border,#e2e8f0); border-radius:12px; padding:18px 20px; margin-bottom:16px; } [data-theme="dark"] .ora-sp-card { background:#1e293b; border-color:#334155; } .ora-sp-card--active { border-left:4px solid #22c55e; } .ora-sp-card--mini { margin-bottom:0; } .ora-sp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-top:4px; } .ora-sp-card-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; } .ora-sp-name { margin:0; font-size:1.05rem; } .ora-sp-card--mini .ora-sp-name { font-size:.95rem; } .ora-sp-name a { text-decoration:none; color:inherit; } .ora-sp-name a:hover { text-decoration:underline; } .ora-sp-sect { margin:0 0 12px; font-size:.95rem; display:flex; align-items:center; gap:8px; } .ora-sp-sect small { font-weight:400; color:var(--text-muted,#94a3b8); } .ora-sp-badge { display:inline-flex; align-items:center; gap:5px; padding:2px 10px; border-radius:20px; font-size:.72rem; font-weight:700; letter-spacing:.03em; background:rgba(100,116,139,.15); color:#475569; } [data-theme="dark"] .ora-sp-badge { color:#cbd5e1; } .ora-sp-badge--st0 { background:rgba(100,116,139,.18); } .ora-sp-badge--st1 { background:rgba(34,197,94,.15); color:#15803d; } [data-theme="dark"] .ora-sp-badge--st1 { color:#4ade80; } .ora-sp-badge--st2 { background:rgba(59,130,246,.15); color:#1d4ed8; } [data-theme="dark"] .ora-sp-badge--st2 { color:#60a5fa; } .ora-sp-badge--ver { background:rgba(124,58,237,.14); color:#6d28d9; } [data-theme="dark"] .ora-sp-badge--ver { color:#a78bfa; } .ora-sp-badge--tk { font-size:.68rem; } .ora-sp-badge--tkdone { background:rgba(34,197,94,.15); color:#15803d; } [data-theme="dark"] .ora-sp-badge--tkdone { color:#4ade80; } .ora-sp-badge--pts { background: var(--surface2, #eef1f5); color: var(--text-muted, #445); } .ora-sp-badge--late { background: color-mix(in oklab, var(--negative) 15%, transparent); color: var(--negative, #b3261e); font-weight: 600; } .ora-sp-meta { display:flex; gap:16px; flex-wrap:wrap; font-size:.8rem; color:var(--text-muted,#64748b); margin-bottom:8px; } .ora-sp-meta i { margin-right:4px; } .ora-sp-progress-wrap { display:flex; align-items:center; gap:10px; margin:8px 0 10px; } .ora-sp-progress { flex:1 1 auto; max-width:420px; height:10px; border-radius:6px; background:rgba(100,116,139,.18); overflow:hidden; } .ora-sp-progress-bar { height:100%; background:#22c55e; border-radius:6px; transition:width .3s; } .ora-sp-progress-lbl { font-size:.75rem; font-weight:600; color:var(--text-muted,#64748b); white-space:nowrap; } .ora-sp-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; } .ora-sp-danger { color:#dc2626 !important; } .ora-sp-editform, .ora-sp-createform, .ora-sp-closeform { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px; } .ora-sp-editform input[type=text], .ora-sp-createform input[type=text] { min-width:220px; } .ora-sp-hint { font-size:.78rem; color:#b45309; margin:8px 0 0; } .ora-sp-empty { color:var(--text-muted,#94a3b8); font-size:.85rem; padding:8px 0; } .ora-sp-flash { display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius:10px; font-size:.85rem; font-weight:600; margin-bottom:14px; } .ora-sp-flash--ok { background:rgba(34,197,94,.12); color:#15803d; } [data-theme="dark"] .ora-sp-flash--ok { color:#4ade80; } .ora-sp-flash--err { background:rgba(220,38,38,.1); color:#b91c1c; } [data-theme="dark"] .ora-sp-flash--err { color:#f87171; } .ora-sp-pickbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:10px; } .ora-sp-pickbar input[type=text] { max-width:320px; } .ora-sp-pickall { font-size:.8rem; color:var(--text-muted,#64748b); display:flex; align-items:center; gap:6px; margin:0; } .ora-sp-picker { max-height:320px; overflow-y:auto; border:1px solid var(--border,#e2e8f0); border-radius:10px; padding:4px; scrollbar-width:thin; scrollbar-color:rgba(100,116,139,.5) transparent; } [data-theme="dark"] .ora-sp-picker { border-color:#334155; } .ora-sp-pickrow { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:8px; cursor:pointer; margin:0; font-weight:400; } .ora-sp-pickrow:hover { background:rgba(100,116,139,.08); } .ora-sp-picktrack { font-weight:700; font-size:.78rem; white-space:nowrap; } .ora-sp-picksubj { flex:1 1 auto; font-size:.82rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ora-sp-picksys { font-size:.72rem; color:var(--text-muted,#94a3b8); white-space:nowrap; } .ora-release-notes { background:rgba(100,116,139,.08); border:1px solid var(--border,#e2e8f0); border-radius:10px; padding:14px 16px; font-size:.82rem; line-height:1.5; white-space:pre-wrap; max-height:420px; overflow-y:auto; } [data-theme="dark"] .ora-release-notes { background:#0f172a; border-color:#334155; } /* Badge de sprint no card do kanban */ .kbc-sprint { font-size:.68rem; font-weight:600; color:#6d28d9; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } [data-theme="dark"] .kbc-sprint { color:#a78bfa; } .kbc-sprint i { font-size:.6rem; margin-right:3px; } /* ============ Internal notifications / ticket follow ============ */ .ora-follow-form { margin: 8px 0 0; } .ora-top-notif { position: relative; display: inline-flex; align-items: center; } .ora-top-notif-btn { position: relative; width: 34px; height: 34px; border: 1px solid var(--border, #dbe3ef); border-radius: 8px; background: var(--surface, #fff); color: var(--text, #0f172a); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .ora-top-notif-btn:hover, .ora-top-notif:focus-within .ora-top-notif-btn { border-color: #94a3b8; background: rgba(37, 99, 235, .06); } .ora-top-notif-badge { position: absolute; top: -6px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 700; line-height: 18px; } .ora-top-notif-panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(380px, calc(100vw - 24px)); max-height: 460px; overflow: auto; border: 1px solid var(--border, #dbe3ef); border-radius: 8px; background: var(--surface, #fff); box-shadow: 0 18px 45px rgba(15, 23, 42, .18); z-index: 1000; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease, visibility .15s ease; } .ora-top-notif:hover .ora-top-notif-panel, .ora-top-notif:focus-within .ora-top-notif-panel { opacity: 1; visibility: visible; transform: translateY(0); } .ora-top-notif-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--border, #dbe3ef); } .ora-top-notif-head a { font-size: 12px; font-weight: 600; color: #2563eb; text-decoration: none; } .ora-top-notif-item { display: flex; gap: 10px; padding: 10px 12px; color: inherit; text-decoration: none; border-bottom: 1px solid rgba(148, 163, 184, .18); } .ora-top-notif-item:hover { background: rgba(37, 99, 235, .06); text-decoration: none; } .ora-top-notif-item.is-unread { background: rgba(37, 99, 235, .04); } .ora-top-notif-ico { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: #2563eb; background: rgba(37, 99, 235, .1); } .ora-top-notif-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .ora-top-notif-copy strong { font-size: 13px; line-height: 1.25; } .ora-top-notif-copy small { color: var(--text-muted, #64748b); font-size: 11px; } .ora-top-notif-copy span { color: var(--text-muted, #64748b); font-size: 12px; line-height: 1.35; } .ora-top-notif-empty { padding: 18px 12px; color: var(--text-muted, #64748b); font-size: 13px; text-align: center; } .ora-sp-movebar { margin-bottom: 10px; } /* ============================================================ ora-boards — Gerenciar Quadros Kanban (manage_boards.php) ============================================================ */ .ora-btabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; } .ora-sp-objective { margin:12px 0; padding:12px 14px; border-left:3px solid #7c3aed; background:rgba(124,58,237,.07); border-radius:0 8px 8px 0; } .ora-sp-objective strong { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:#6d28d9; } .ora-sp-objective p { margin:4px 0 0; font-size:.88rem; } [data-theme="dark"] .ora-sp-objective strong { color:#a78bfa; } .ora-sp-capacity { display:grid; grid-template-columns:1fr auto; gap:5px 10px; margin:0 0 12px; font-size:.78rem; } .ora-sp-capacity > div { grid-column:1/-1; height:6px; border-radius:6px; background:rgba(100,116,139,.18); overflow:hidden; } .ora-sp-capacity > div i { display:block; height:100%; background:#7c3aed; border-radius:6px; } .ora-sp-capacity.is-full strong { color:#dc2626; } .ora-sp-capacity.is-full > div i { background:#dc2626; } .ora-sp-history summary { cursor:pointer; font-weight:700; font-size:.88rem; } .ora-sp-history-list { margin-top:12px; display:grid; gap:6px; } .ora-sp-history-list > div { display:flex; flex-wrap:wrap; gap:6px; padding:7px 0; border-top:1px solid var(--border,#e2e8f0); font-size:.78rem; } .ora-sp-history-list time,.ora-sp-history-list small { color:var(--text-muted,#64748b); } .ora-sp-history-list small { margin-left:auto; } .ora-sp-editform textarea { min-width:300px; } .ora-btab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border, #e2e8f0); border-radius: 10px; background: var(--surface, #fff); } .ora-btab.is-active { border-color: var(--accent-bright, #3b82f6); box-shadow: 0 0 0 1px var(--accent-bright, #3b82f6) inset; } .ora-btab.is-off { opacity: .55; } .ora-btab-name { font-weight: 600; color: var(--text, #0f172a); text-decoration: none; } .ora-btab.is-active .ora-btab-name { color: var(--accent-bright, #3b82f6); } .ora-btab-tools a { color: var(--text-dim, #94a3b8); font-size: 11px; padding: 2px 3px; text-decoration: none; } .ora-btab-tools a:hover { color: var(--accent-bright, #3b82f6); } .ora-btag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 10px; background: var(--surface2, #f1f5f9); color: var(--text-muted, #64748b); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; } .ora-btag--entry { background: rgba(34,197,94,.14); color: #15803d; } .ora-btag--terminal { background: rgba(139,92,246,.14); color: #6d28d9; } .ora-btag--warn { background: rgba(234,179,8,.16); color: #a16207; } .ora-bhead-tools { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; } /* --- preview de etapas --- */ .ora-bstages { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; } .ora-bstage { --col: #64748b; flex: 0 0 200px; border: 1px solid var(--border, #e2e8f0); border-top: 3px solid var(--col); border-radius: 10px; background: var(--surface, #fff); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; } .ora-bstage.is-off { opacity: .5; } .ora-bstage-name { font-weight: 700; font-size: 13px; color: var(--text, #0f172a); } .ora-bstage-name i { color: var(--col); margin-right: 4px; } .ora-bstage-status { font-size: 11.5px; color: var(--text-muted, #64748b); } .ora-bstage-flags { display: flex; flex-wrap: wrap; gap: 4px; min-height: 16px; } .ora-bstage-tools { margin-top: auto; display: flex; align-items: center; gap: 4px; } .ora-bstage-tools a, .ora-bstage-tools button { border: 0; background: none; cursor: pointer; color: var(--text-dim, #94a3b8); font-size: 13px; padding: 3px 5px; text-decoration: none; } .ora-bstage-tools a:hover, .ora-bstage-tools button:hover { color: var(--accent-bright, #3b82f6); } /* --- ações --- */ .ora-bactions { display: flex; flex-direction: column; gap: 8px; } .ora-baction { --col: #6366f1; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 12px; border: 1px solid var(--border, #e2e8f0); border-left: 4px solid var(--col); border-radius: 10px; background: var(--surface, #fff); } .ora-baction.is-off { opacity: .5; } .ora-baction-label { font-weight: 700; font-size: 13px; color: var(--text, #0f172a); } .ora-baction-label i { color: var(--col); margin-right: 4px; } .ora-baction-dest { font-size: 12px; color: var(--text-muted, #64748b); } .ora-baction .ora-bstage-tools { margin: 0 0 0 auto; } /* --- painéis / formulários --- */ .ora-bpanel--edit { margin-top: 12px; border: 1px dashed var(--border, #cbd5e1); border-radius: 10px; padding: 14px; background: var(--surface2, #f8fafc); } .ora-bform { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; } .ora-bfield { display: flex; flex-direction: column; gap: 6px; min-width: 170px; } .ora-bfield--grow { flex: 1 1 220px; } .ora-bfield--btn { justify-content: flex-end; align-self: flex-end; min-width: 0; } .ora-bfield > label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted, #64748b); margin: 0; } .ora-bcheck { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400; color: var(--text, #0f172a); margin: 0; } .ora-bhint { display: block; font-size: 11.5px; color: var(--text-dim, #94a3b8); margin-top: 4px; } /* cor */ .ora-bcolor { display: flex; align-items: center; gap: 8px; } .ora-bcolor input[type="color"] { width: 42px; height: 30px; padding: 1px; border: 1px solid var(--border, #e2e8f0); border-radius: 6px; background: var(--surface, #fff); cursor: pointer; } .ora-bswatches { display: flex; flex-wrap: wrap; gap: 4px; max-width: 160px; } .ora-bswatch { width: 20px; height: 20px; border: 1px solid rgba(0,0,0,.15); border-radius: 5px; cursor: pointer; padding: 0; } .ora-bswatch:hover { transform: scale(1.15); } /* ícone */ .ora-bicon input { max-width: 220px; } .ora-bicons { display: flex; flex-wrap: wrap; gap: 4px; max-width: 320px; margin-top: 6px; } .ora-bicon-opt { width: 30px; height: 28px; border: 1px solid var(--border, #e2e8f0); border-radius: 6px; background: var(--surface, #fff); color: var(--text-muted, #64748b); cursor: pointer; font-size: 13px; } .ora-bicon-opt:hover { color: var(--accent-bright, #3b82f6); border-color: var(--accent-bright, #3b82f6); } .ora-bicon-opt.is-sel { color: #fff; background: var(--accent-bright, #3b82f6); border-color: var(--accent-bright, #3b82f6); } /* ============================================================ ora-kanban-col--action — colunas de ação (drop) coloridas Cor vem do cadastro via --col (manage_boards). ============================================================ */ .ora-kanban-col--action { --col: #6366f1; background: var(--surface, #fff); border: 1px solid color-mix(in srgb, var(--col) 45%, transparent); border-top: 3px solid var(--col); border-radius: 12px; min-width: 170px; max-width: 210px; display: flex; flex-direction: column; /* mesma formula de altura de .ora-kanban-col--stage — sem isso a coluna de acao herda min/max-height da .ora-kanban-col base (500px / 100vh-220px), que diverge da etapa (120px / 100vh-300px) e o gap muda com a altura da tela. */ min-height: 120px; height: calc(100vh - 300px); } .ora-kanban-col--action .ora-kb-action-head { background: color-mix(in srgb, var(--col) 16%, transparent); color: var(--col); font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; padding: 10px 12px; border-radius: 9px 9px 0 0; } .ora-kanban-col--action .ora-kb-action-head i { color: var(--col); margin-right: 4px; } .ora-kanban-col--action .ora-kb-action-drop { flex: 1; display: flex; align-items: center; justify-content: center; margin: 10px; border: 2px dashed color-mix(in srgb, var(--col) 40%, transparent); border-radius: 10px; min-height: 120px; transition: background .15s ease, border-color .15s ease; } .ora-kb-action-hint { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 14px 10px; color: var(--text-muted, #64748b); } .ora-kb-action-hint i { font-size: 22px; color: color-mix(in srgb, var(--col) 75%, var(--text-muted, #64748b)); } .ora-kb-action-hint span { font-size: 12.5px; font-weight: 600; color: var(--text, #0f172a); } .ora-kb-action-hint small { font-size: 11px; color: var(--text-dim, #94a3b8); } /* Realce quando um card está sendo arrastado sobre a ação */ .ora-kanban-col--action.is-dropzone { border-color: var(--col); box-shadow: 0 0 0 2px color-mix(in srgb, var(--col) 35%, transparent); } .ora-kanban-col--action.is-dropzone .ora-kb-action-drop { background: color-mix(in srgb, var(--col) 12%, transparent); border-color: var(--col); } /* Tema escuro: superfícies escuras, cor da ação segue viva */ [data-theme="dark"] .ora-kanban-col--action { background: #1e293b; } [data-theme="dark"] .ora-kb-action-hint span { color: #e2e8f0; } /* --- excluir etapa/ação + badge "pede data" + modal de data do kanban --- */ .ora-bstage-del { margin-left: auto; } .ora-bstage-del:hover i, .ora-bstage-del i:hover { color: var(--negative, #ef4444) !important; } .ora-btag--date { background: rgba(234,179,8,.16); color: #a16207; } .kbc-prazo { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted, #64748b); } .kbc-prazo i { color: #eab308; } .kbc-prazo--venc { color: var(--negative, #ef4444); font-weight: 700; } .kbc-prazo--venc i { color: var(--negative, #ef4444); } /* ---------- Dialog "Detalhes / editar" do card ---------- */ .ora-kb-editbox { width: 460px; max-width: calc(100vw - 32px); background: var(--card, #fff); color: var(--text, #1e293b); border-radius: 12px; padding: 18px; box-shadow: 0 18px 48px rgba(0,0,0,.35); } [data-theme="dark"] .ora-kb-editbox { background: #0f172a; color: #e2e8f0; } .ora-kb-edithead { display: flex; align-items: center; gap: 8px; } .ora-kb-edittrack { font-size: .78rem; font-weight: 700; letter-spacing: .05em; color: var(--text-muted, #6b7280); } .ora-kb-editclose { margin-left: auto; border: 0; background: transparent; cursor: pointer; font-size: 1rem; color: var(--text-muted, #94a3b8); padding: 4px 6px; border-radius: 6px; } .ora-kb-editclose:hover { background: rgba(100,116,139,.15); } .ora-kb-editsubject { font-size: 1rem; font-weight: 600; margin: 6px 0 4px; line-height: 1.3; } .ora-kb-editinfo { display: flex; flex-wrap: wrap; gap: 12px; font-size: .78rem; color: var(--text-muted, #6b7280); margin-bottom: 12px; } .ora-kb-editinfo i { opacity: .7; margin-right: 3px; } .ora-kb-editgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ora-kb-editfield { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; font-weight: 600; color: var(--text-muted, #6b7280); } .ora-kb-editmove { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border, #e2e8f0); } .ora-kb-editmove-title { font-size: .82rem; font-weight: 700; margin-bottom: 8px; color: var(--text, #334155); } [data-theme="dark"] .ora-kb-editmove-title { color: #cbd5e1; } .ora-kb-editbtns { display: flex; align-items: center; gap: 8px; margin-top: 16px; } .ora-kb-editmsg { margin-top: 10px; font-size: .82rem; padding: 7px 10px; border-radius: 6px; } .ora-kb-editmsg.is-err { background: #fee2e2; color: #b91c1c; } .ora-kb-editmsg.is-ok { background: #dcfce7; color: #15803d; } /* ---------- Dialog detalhado (iframe do chamado) ---------- */ .ora-kb-detailmodal { position: fixed; inset: 0; z-index: 10000; background: rgba(15, 23, 42, .6); display: flex; align-items: center; justify-content: center; padding: 20px; } html.ora-kb-detail-open, body.ora-kb-detail-open { overflow: hidden; } .ora-kb-detailbox { width: 80vw; height: 80vh; display: flex; flex-direction: column; background: var(--card, #fff); color: var(--text, #1e293b); border-radius: 12px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.45); } [data-theme="dark"] .ora-kb-detailbox { background: #0f172a; color: #e2e8f0; } .ora-kb-detailhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border, #e2e8f0); flex-shrink: 0; } .ora-kb-detailtitle { font-size: .82rem; font-weight: 700; letter-spacing: .04em; color: var(--text-muted, #6b7280); } .ora-kb-detailtools { display: flex; align-items: center; gap: 8px; } .ora-kb-detailclose { border: 0; background: transparent; cursor: pointer; font-size: 1.1rem; color: var(--text-muted, #94a3b8); padding: 4px 8px; border-radius: 6px; } .ora-kb-detailclose:hover { background: rgba(100,116,139,.15); } .ora-kb-detailframe { flex: 1 1 auto; width: 100%; border: 0; background: var(--bg, #fff); } [data-theme="dark"] .ora-kb-detailframe { background: #0b1220; } /* Linha da lista clicável (abre o dialog detalhado) */ tr.tkt-row { cursor: pointer; } /* Aba Acesso do quadro (operadores por quadro) */ .ora-kbe-access-tools { display: flex; gap: 8px; margin-bottom: 10px; } .ora-kbe-access-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; } .ora-kbe-access-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; } .ora-kbe-access-item:hover { background: rgba(100,116,139,.12); } .ora-kbe-access-item input { flex-shrink: 0; } .ora-kb-datemodal { position: fixed; inset: 0; z-index: 9999; background: rgba(15, 23, 42, .55); display: flex; align-items: center; justify-content: center; } .ora-kb-datemodal-box { background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 14px; padding: 20px; width: 320px; max-width: calc(100vw - 40px); box-shadow: 0 20px 50px rgba(0,0,0,.3); display: flex; flex-direction: column; gap: 14px; } [data-theme="dark"] .ora-kb-datemodal-box { background: #1e293b; } .ora-kb-datemodal-title { font-weight: 700; font-size: 13.5px; color: var(--text, #0f172a); } [data-theme="dark"] .ora-kb-datemodal-title { color: #e2e8f0; } .ora-kb-datemodal-title i { color: #eab308; margin-right: 6px; } .ora-kb-datemodal-row { display: flex; gap: 8px; } .ora-kb-datemodal-row input { flex: 1; } .ora-kb-datemodal-btns { display: flex; justify-content: flex-end; gap: 8px; } /* ============================================================ Kanban — melhorias: WIP, colapsar, contraste, toque, a11y ============================================================ */ /* Cor de texto do header por contraste (definida em --col-txt pelo PHP/JS) */ .ora-kanban-col--stage .ora-kanban-col-header { background: var(--col, #64748b); color: var(--col-txt, #fff); border-radius: 10px 10px 0 0; } .ora-kanban-col--stage .ora-kanban-col-header .kbh-title, .ora-kanban-col--stage .ora-kanban-col-header .kbh-title i, .ora-kanban-col--stage .kbh-collapse { color: var(--col-txt, #fff); } .ora-kanban-col-header { display: flex; align-items: center; gap: 6px; } .kbh-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Botão recolher */ .kbh-collapse { border: 0; background: none; cursor: pointer; padding: 0 2px; font-size: 12px; opacity: .8; transition: transform .15s; } .kbh-collapse:hover { opacity: 1; } .ora-kanban-col.is-collapsed .kbh-collapse i { transform: rotate(-90deg); } /* Coluna recolhida: some os cards, encolhe a largura */ .ora-kanban-col.is-collapsed { min-width: 46px; width: 46px; } .ora-kanban-col.is-collapsed .ora-kanban-cards, .ora-kanban-col.is-collapsed .kbh-shown { display: none; } .ora-kanban-col.is-collapsed .kbh-title { writing-mode: vertical-rl; transform: rotate(180deg); margin-top: 6px; } /* WIP limit */ .kbh-wip { opacity: .7; font-weight: 500; } .kbh-count.is-over { background: var(--negative, #ef4444) !important; color: #fff !important; animation: kbWipPulse 1.6s ease-in-out infinite; } .ora-kanban-col.is-wip-over { box-shadow: inset 0 0 0 2px var(--negative, #ef4444); } @keyframes kbWipPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } } /* Card recém-movido: pulso de destaque */ .ora-kanban-card.is-just-moved { animation: kbJustMoved 2.2s ease-out; } @keyframes kbJustMoved { 0% { box-shadow: 0 0 0 3px var(--accent-bright, #3b82f6); background: rgba(59,130,246,.14); } 100% { box-shadow: none; background: inherit; } } /* Card focado por teclado */ .ora-kanban-card:focus-visible, .ora-kanban-card:focus { outline: 2px solid var(--accent-bright, #3b82f6); outline-offset: 1px; } /* Fantasma do arraste por toque */ .ora-kb-ghost { position: fixed; z-index: 9998; pointer-events: none; opacity: .9; transform: rotate(2deg); box-shadow: 0 12px 30px rgba(0,0,0,.35); } /* Em telas de toque, o card não deve rolar a página ao arrastar */ .ora-kanban-card { touch-action: pan-y; } /* Botão "Meus" ativo */ #kbMine.is-on { background: var(--accent-bright, #3b82f6); color: #fff; border-color: var(--accent-bright, #3b82f6); } /* Estado vazio de quadro (sem etapas) */ .ora-kb-boardempty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 48px 20px; text-align: center; color: var(--text-muted, #64748b); } .ora-kb-boardempty i { font-size: 34px; opacity: .5; margin-bottom: 6px; } .ora-kb-boardempty a { color: var(--accent-bright, #3b82f6); font-weight: 600; } /* manage_boards: grip + arraste de etapa */ .ora-bstage[draggable="true"] { cursor: grab; } .ora-bstage.is-dragging { opacity: .5; cursor: grabbing; } .ora-bstage-grip { color: var(--text-dim, #94a3b8); cursor: grab; margin-right: 2px; } /* kanban editor v2: abas operacionais + drawer unico */ .ora-kbe-nav { display:flex; gap:6px; padding:6px; margin:0 0 14px; overflow-x:auto; border:1px solid var(--border, #e2e8f0); border-radius:12px; background:var(--surface, #fff); } .ora-kbe-nav a { display:flex; align-items:center; gap:7px; padding:9px 14px; border-radius:8px; color:var(--text-muted, #64748b); font-weight:600; text-decoration:none; white-space:nowrap; } .ora-kbe-nav a:hover { color:var(--text, #1e293b); background:var(--surface2, #f8fafc); } .ora-kbe-nav a.is-active { color:#fff; background:var(--accent, #2563eb); box-shadow:0 3px 8px rgba(37,99,235,.2); } .ora-kbe-nav a span { min-width:20px; padding:1px 6px; border-radius:10px; text-align:center; font-size:11px; background:rgba(100,116,139,.14); } .ora-kbe-nav a.is-active span { background:rgba(255,255,255,.2); } .ora-kbe-panel[hidden] { display:none !important; } .ora-kbe-moves { display:grid; gap:8px; } .ora-kbe-move-row { display:grid; grid-template-columns:minmax(150px,220px) 24px 1fr auto; gap:10px; align-items:center; padding:11px 13px; border:1px solid var(--border, #e2e8f0); border-radius:9px; } .ora-kbe-move-row > i { color:var(--text-dim, #94a3b8); text-align:center; } .ora-kbe-move-row em { color:var(--text-muted, #64748b); } .ora-kbe-targets { display:grid; gap:10px; } .ora-kbe-target { padding:12px; border:1px solid var(--border, #e2e8f0); border-radius:10px; background:var(--surface, #fff); } .ora-kbe-target--action { border-left:4px solid var(--warn, #f59e0b); } .ora-kbe-target-main { display:flex; align-items:center; gap:9px; margin:0; font-weight:700; cursor:pointer; } .ora-kbe-target-main input { margin:0; } .ora-kbe-target-rules { display:flex; flex-wrap:wrap; gap:8px 16px; margin:10px 0 0 25px; color:var(--text-muted, #64748b); font-size:12px; } .ora-kbe-target-rules label { display:flex; align-items:center; gap:5px; margin:0; font-weight:500; cursor:pointer; } .ora-kbe-target-rules input:disabled + * { opacity:.45; } .ora-kbe-target.is-disabled .ora-kbe-target-rules { opacity:.45; } .ora-kbe-drawer-actions { position:sticky; bottom:0; display:flex; justify-content:flex-end; margin:18px -20px -20px; padding:14px 20px; border-top:1px solid var(--border, #e2e8f0); background:var(--surface, #fff); } .ora-kbe-validation { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; } .ora-kbe-validation > div { display:grid; grid-template-columns:24px 1fr; gap:3px 8px; padding:13px; border:1px solid var(--border, #e2e8f0); border-radius:10px; } .ora-kbe-validation > div > i { grid-row:1 / span 2; margin-top:2px; } .ora-kbe-validation > div > span { color:var(--text-muted, #64748b); font-size:12px; } .ora-kbe-validation .is-ok > i { color:#16a34a; } .ora-kbe-validation .is-warn > i { color:#d97706; } .ora-kbe-validation .is-error > i { color:#dc2626; } .ora-kbe-drawer[hidden] { display:none !important; } .ora-kbe-drawer { position:fixed; inset:0; z-index:10050; display:flex; justify-content:flex-end; } .ora-kbe-drawer-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(15,23,42,.45); cursor:default; } .ora-kbe-drawer-panel { position:relative; width:min(620px,94vw); height:100%; overflow:auto; background:var(--surface, #fff); box-shadow:-12px 0 35px rgba(15,23,42,.22); } .ora-kbe-drawer-head { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid var(--border, #e2e8f0); background:var(--surface, #fff); } .ora-kbe-drawer-head h2 { margin:0; font-size:18px; color:var(--text, #1e293b); } .ora-kbe-drawer-body { padding:18px; } .ora-kbe-drawer-body .ora-bpanel--edit { margin:0; padding:0; border:0; background:transparent; } .ora-kbe-drawer-body .ora-bform { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .ora-kbe-drawer-body .ora-bfield { min-width:0; } .ora-kbe-drawer-body .ora-bfield--grow { grid-column:1 / -1; } .ora-kbe-drawer-body .ora-bfield--btn { grid-column:1 / -1; align-items:flex-end; } .ora-kbe-drawer-body .ora-bicons { max-height:132px; overflow:auto; } body.ora-kbe-drawer-open { overflow:hidden; } /* preview mais proximo das colunas reais */ .ora-bstages { align-items:stretch; } .ora-bstage { min-width:220px; min-height:132px; display:flex; flex-direction:column; } .ora-bstage-tools { margin-top:auto; padding-top:10px; border-top:1px solid rgba(148,163,184,.18); } .ora-kbe-tool-label { font-size:11px; } @media (max-width:700px) { .ora-kbe-drawer-body .ora-bform { grid-template-columns:1fr; } .ora-kbe-drawer-body .ora-bfield--grow,.ora-kbe-drawer-body .ora-bfield--btn { grid-column:auto; } .ora-kbe-move-row { grid-template-columns:1fr 20px 1fr; } .ora-kbe-move-row .ora-btn { grid-column:1 / -1; justify-content:center; } .ora-kbe-target-rules { margin-left:0; flex-direction:column; } } @media (max-width: 768px) { .ora-kanban-col { min-width: 78vw; } .ora-kanban-col.is-collapsed { min-width: 46px; } .ora-kanban-toolbar { flex-wrap: wrap; } } .ora-kb-stage-policy { padding: 6px 10px; color: #64748b; font-size: 11px; line-height: 1.35; border-bottom: 1px solid rgba(100,116,139,.14); background: rgba(248,250,252,.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Burndown chart styles */ .ora-sp-burndown-wrap { margin: 12px 0; } .ora-sp-burndown { width: 100%; max-width: 480px; height: auto; } [data-theme="dark"] .ora-kb-stage-policy { color:#94a3b8; background:rgba(15,23,42,.45); } /* Legacy "usuarios online" box (hesk_style_v24.css div.online) — sem isso fica branco fixo no dark */ [data-theme="dark"] div.online { background: var(--card, #1e2432); color: var(--text, #e2e8f0); border-color: var(--border, #3a3d66); } [data-theme="dark"] div.online a { color: var(--accent, #5CB3E8); } /* ══════════════════════════════════════════════════════════ Painel de configuração de cards KPI — abas, chips, arraste Consumido por inc/kpi_panel.inc.php e admin/js/ora-kpi-cards.js ══════════════════════════════════════════════════════════ */ .ora-kpi-cfg-panel { display: none; position: absolute; top: 0; right: 0; z-index: 400; width: 340px; max-height: 78vh; overflow-y: auto; background: var(--card); border: 1px solid var(--border-strong, var(--border)); border-radius: var(--radius-sm, 8px); box-shadow: 0 4px 20px rgba(0,0,0,.35); padding: 12px; } .ora-kpi-cfg-panel.open { display: block; } .ora-kpi-cfg-close { display: block; width: 100%; margin-top: 8px; padding: 5px 10px; background: none; border: none; border-top: 1px solid var(--border); color: var(--text-muted); font-size: .78rem; font-weight: 600; text-align: center; cursor: pointer; transition: color .12s; } .ora-kpi-cfg-close:hover { color: var(--text); } /* Abas */ .ora-kpi-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 10px; } .ora-kpi-tab { flex: 1; padding: 7px 6px; font-size: .78rem; font-weight: 600; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); cursor: pointer; } .ora-kpi-tab:hover { color: var(--text); } .ora-kpi-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .ora-kpi-tabpane { display: none; } .ora-kpi-tabpane.active { display: block; } /* Busca da aba Cards */ .ora-kpi-search { margin-bottom: 8px; font-size: .8rem; } /* Linha de card na lista do painel */ .ora-kpi-row { display: flex; align-items: center; gap: 7px; padding: 6px 4px; border-radius: 6px; font-size: .82rem; border: 1px solid transparent; } .ora-kpi-row:hover { background: var(--card-hover); } .ora-kpi-row.dragging { opacity: .45; } .ora-kpi-row.dragover { border-top-color: var(--accent); } .ora-kpi-row-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ora-kpi-drag { cursor: grab; color: var(--text-muted); flex-shrink: 0; } .ora-kpi-drag:active { cursor: grabbing; } .ora-kpi-badge { font-size: .66rem; padding: 1px 5px; border-radius: 4px; background: color-mix(in oklab, #8B5CF6 18%, transparent); color: #8B5CF6; flex-shrink: 0; } .ora-kpi-btn-xs { background: none; border: none; padding: 2px 4px; cursor: pointer; color: var(--text-muted); font-size: .74rem; } .ora-kpi-btn-xs:hover { color: var(--accent); } /* Card KPI oculto pelo painel de visibilidade (applyVisibility() em admin/js/ora-kpi-cards.js) — sem isso, desmarcar um card na aba "Cards" nao tem efeito visual algum. */ .ora-kpi-card.kpi-hidden { display: none !important; } /* Chips do construtor de fontes */ .ora-kpi-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0; min-height: 26px; } .ora-kpi-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .73rem; padding: 3px 6px 3px 8px; border-radius: 12px; background: color-mix(in oklab, #3B82F6 14%, transparent); color: #3B82F6; border: 1px solid color-mix(in oklab, #3B82F6 34%, transparent); } .ora-kpi-chip--stage { background: color-mix(in oklab, #8B5CF6 14%, transparent); color: #8B5CF6; border-color: color-mix(in oklab, #8B5CF6 34%, transparent); } .ora-kpi-chip-x { background: none; border: none; padding: 0; cursor: pointer; color: inherit; opacity: .7; } .ora-kpi-chip-x:hover { opacity: 1; } .ora-kpi-chips-empty { font-size: .73rem; color: var(--text-muted); font-style: italic; } /* Preview do card no editor */ .ora-kpi-preview { border: 1px dashed var(--border); border-radius: 8px; padding: 8px; margin: 8px 0; display: flex; align-items: center; gap: 9px; } .ora-kpi-preview .ora-kpi-icon { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem; } .ora-kpi-preview-label { font-size: .8rem; font-weight: 600; } .ora-kpi-preview-sub { font-size: .7rem; color: var(--text-muted); } /* Grade de ícones (movida do inline dos dois PHP) */ .ora-kpi-icon-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; max-height: 150px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; padding: 4px; } /* Shimmer de loading, substituindo o "…" textual */ .ora-kpi-value--loading { color: transparent; border-radius: 4px; min-width: 34px; display: inline-block; background: linear-gradient(90deg, color-mix(in oklab, var(--text-muted) 12%, transparent) 25%, color-mix(in oklab, var(--text-muted) 26%, transparent) 50%, color-mix(in oklab, var(--text-muted) 12%, transparent) 75%); background-size: 200% 100%; animation: ora-kpi-shimmer 1.3s linear infinite; } @keyframes ora-kpi-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .ora-kpi-value--loading { animation: none; } } /* Tom do card "Em Desenvolvimento" (só existia na lista) */ .ora-kpi-icon--emdev { background: color-mix(in oklab, #8B5CF6 12%, transparent); color: #8B5CF6; } .ora-kpi-stripe--emdev { background: #8B5CF6; }