/* ========================================================================== Scania Portal V3 - Design System Dual theme (dark | light) via [data-theme] attribute on Tokens, layout, topbar, sidebar, cards, forms ========================================================================== */ /* ---------- Design Tokens ------------------------------------------------- */ :root, [data-theme="dark"] { /* Backgrounds */ --v3-bg: #0B1220; --v3-bg-2: #0F172A; --v3-surface: rgba(255, 255, 255, 0.03); --v3-surface-h: rgba(255, 255, 255, 0.05); --v3-border: rgba(255, 255, 255, 0.06); --v3-border-str: rgba(255, 255, 255, 0.12); /* Text */ --v3-text: #E2E8F0; --v3-text-muted: #94A3B8; --v3-text-dim: #64748B; /* Brand */ --v3-accent: #005FFF; --v3-accent-2: #3B82F6; --v3-accent-3: #60A5FA; --v3-violet: #8B5CF6; --v3-cyan: #06B6D4; /* Feedback */ --v3-green: #10B981; --v3-amber: #F59E0B; --v3-red: #EF4444; /* Layout */ --v3-shell-grad: radial-gradient(ellipse at top, #1E293B 0%, #0B1220 45%, #0F172A 100%); --v3-topbar-bg: rgba(15, 23, 42, 0.7); --v3-sidebar-bg: rgba(11, 18, 32, 0.85); /* Shadows */ --v3-shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, .3); --v3-shadow: 0 8px 24px -8px rgba(0, 0, 0, .5); --v3-shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, .6); --v3-glow: 0 0 0 1px rgba(255, 255, 255, .04), 0 10px 40px -12px rgba(0, 0, 0, .5); /* Scrollbar */ --v3-scrollbar: rgba(255, 255, 255, .1); color-scheme: dark; } [data-theme="light"] { --v3-bg: #F7F9FC; --v3-bg-2: #EDF2F7; --v3-surface: #FFFFFF; --v3-surface-h: #F8FAFC; --v3-border: rgba(15, 23, 42, 0.08); --v3-border-str: rgba(15, 23, 42, 0.16); --v3-text: #0F172A; --v3-text-muted: #475569; --v3-text-dim: #94A3B8; --v3-accent: #005FFF; --v3-accent-2: #3B82F6; --v3-accent-3: #1E40AF; --v3-violet: #7C3AED; --v3-cyan: #0891B2; --v3-green: #059669; --v3-amber: #D97706; --v3-red: #DC2626; --v3-shell-grad: linear-gradient(180deg, #F7F9FC 0%, #EDF2F7 100%); --v3-topbar-bg: rgba(255, 255, 255, 0.8); --v3-sidebar-bg: rgba(255, 255, 255, 0.9); --v3-shadow-sm: 0 1px 3px rgba(15, 23, 42, .08); --v3-shadow: 0 4px 16px -4px rgba(15, 23, 42, .08); --v3-shadow-lg: 0 12px 32px -8px rgba(15, 23, 42, .12); --v3-glow: 0 0 0 1px rgba(15, 23, 42, .04), 0 8px 24px -8px rgba(15, 23, 42, .08); --v3-scrollbar: rgba(15, 23, 42, .15); color-scheme: light; } /* ---------- Base ---------------------------------------------------------- */ html[data-theme] body.v3 { margin: 0; padding: 0; min-height: 100vh; background: var(--v3-bg); color: var(--v3-text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html[data-theme] body.v3 *, html[data-theme] body.v3 *::before, html[data-theme] body.v3 *::after { box-sizing: border-box; } html[data-theme] body.v3 a { color: var(--v3-accent-2); text-decoration: none; transition: color .15s ease; } html[data-theme] body.v3 a:hover { color: var(--v3-accent-3); } html[data-theme] body.v3 ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-theme] body.v3 ::-webkit-scrollbar-thumb { background: var(--v3-scrollbar); border-radius: 5px; } html[data-theme] body.v3 ::-webkit-scrollbar-track { background: transparent; } /* ---------- Shell -------------------------------------------------------- */ .v3-root { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 60px 1fr auto; grid-template-areas: "sidebar topbar" "sidebar main" "sidebar footer"; min-height: 100vh; background: var(--v3-shell-grad); } /* ---------- Topbar ------------------------------------------------------- */ .v3-topbar { grid-area: topbar; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: var(--v3-topbar-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--v3-border); position: sticky; top: 0; z-index: 40; } .v3-topbar-left { display: flex; align-items: center; gap: 16px; min-width: 0; } .v3-topbar-right { display: flex; align-items: center; gap: 8px; } .v3-sidebar-toggle { background: transparent; border: none; color: var(--v3-text-muted); width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s ease; } .v3-sidebar-toggle:hover { background: var(--v3-surface-h); color: var(--v3-text); } .v3-brand { display: flex; align-items: center; gap: 10px; } .v3-brand-logo { height: 28px; width: auto; } .v3-brand-title { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; color: var(--v3-text); white-space: nowrap; } .v3-brand-title em { font-style: normal; font-weight: 400; color: var(--v3-text-muted); margin-left: 6px; } .v3-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--v3-text-muted); margin-left: 8px; padding-left: 16px; border-left: 1px solid var(--v3-border); } .v3-breadcrumb a { color: var(--v3-text-muted); } .v3-breadcrumb strong { color: var(--v3-text); font-weight: 500; } .v3-breadcrumb .sep { opacity: .4; } .v3-icon-btn { background: transparent; border: none; color: var(--v3-text-muted); width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s ease; position: relative; } .v3-icon-btn:hover { background: var(--v3-surface-h); color: var(--v3-text); } .v3-icon-btn .dot-badge { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--v3-red); box-shadow: 0 0 0 2px var(--v3-topbar-bg); } .v3-user { display: inline-flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: 999px; cursor: pointer; transition: all .15s ease; color: var(--v3-text); } .v3-user:hover { background: var(--v3-surface-h); border-color: var(--v3-border-str); } .v3-user-av { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--v3-accent), var(--v3-violet)); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; text-transform: uppercase; } .v3-user-name { font-size: 12px; font-weight: 500; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v3-menu { position: absolute; right: 24px; top: 56px; min-width: 220px; background: var(--v3-sidebar-bg); backdrop-filter: blur(12px); border: 1px solid var(--v3-border); border-radius: 10px; box-shadow: var(--v3-shadow-lg); padding: 6px; display: none; z-index: 50; } .v3-menu.open { display: block; } .v3-menu a, .v3-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; color: var(--v3-text); font-size: 13px; border-radius: 8px; background: transparent; border: none; text-align: left; cursor: pointer; transition: background .15s ease; text-decoration: none; } .v3-menu a:hover, .v3-menu button:hover { background: var(--v3-surface-h); color: var(--v3-text); } .v3-menu hr { margin: 4px 6px; border: none; border-top: 1px solid var(--v3-border); } /* ---------- Sidebar ------------------------------------------------------ */ .v3-sidebar { grid-area: sidebar; width: 264px; background: var(--v3-sidebar-bg); backdrop-filter: blur(12px); border-right: 1px solid var(--v3-border); overflow-y: auto; overflow-x: hidden; transition: width .28s cubic-bezier(.4,0,.2,1); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; } [data-theme="dark"] .v3-sidebar::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 600px 400px at top left, rgba(0,95,255,.06), transparent 60%); pointer-events: none; z-index: 0; } .v3-sidebar > * { position: relative; z-index: 1; } .v3-sidebar-head { padding: 14px 18px; border-bottom: 1px solid var(--v3-border); display: flex; align-items: center; gap: 12px; min-height: 60px; position: relative; } .v3-sidebar-head .v3-brand-logo-img { height: 34px; width: auto; max-width: 120px; object-fit: contain; flex: 0 0 auto; } /* logo mantido em cores originais (grifon vermelho + coroa azul) nos dois temas */ .v3-sidebar-head .v3-brand-text { display: flex; flex-direction: column; min-width: 0; overflow: hidden; } .v3-sidebar-head .v3-brand-text-title { font-size: 14px; font-weight: 700; color: var(--v3-text); letter-spacing: -0.01em; white-space: nowrap; } .v3-sidebar-head .v3-brand-text-sub { font-size: 10px; color: var(--v3-text-muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; white-space: nowrap; } .v3-sidebar-nav { flex: 1; padding: 16px 12px 12px; display: flex; flex-direction: column; gap: 2px; } .v3-nav-group-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--v3-text-dim); padding: 18px 14px 6px; white-space: nowrap; display: flex; align-items: center; gap: 8px; } .v3-nav-group-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--v3-border) 0%, transparent 100%); } .v3-nav-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; color: var(--v3-text-muted); font-size: 13px; font-weight: 500; text-decoration: none; transition: all .15s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; } .v3-nav-item:hover { background: var(--v3-surface-h); color: var(--v3-text); } .v3-nav-item:hover .v3-icon-wrap { background: rgba(0,95,255,.12); color: var(--v3-accent-3); } .v3-nav-item.is-active { background: var(--v3-surface-h); color: var(--v3-text); font-weight: 600; } [data-theme="dark"] .v3-nav-item.is-active { background: linear-gradient(90deg, rgba(0,95,255,.22), rgba(0,95,255,.04)); box-shadow: inset 0 0 0 1px rgba(0,95,255,.25); } [data-theme="light"] .v3-nav-item.is-active { background: rgba(0,95,255,.08); box-shadow: inset 0 0 0 1px rgba(0,95,255,.18); } .v3-nav-item.is-active::before { content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: var(--v3-accent); border-radius: 0 3px 3px 0; } .v3-nav-item.is-active .v3-icon-wrap { background: var(--v3-accent); color: #fff; box-shadow: 0 4px 10px -2px var(--v3-accent); } .v3-icon-wrap { width: 30px; height: 30px; border-radius: 8px; background: var(--v3-surface); color: var(--v3-text-muted); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; transition: all .15s ease; border: 1px solid var(--v3-border); } .v3-icon-wrap svg { width: 15px; height: 15px; } .v3-nav-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .v3-nav-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; background: var(--v3-accent); color: #fff; border-radius: 999px; line-height: 1; } /* Trigger de grupo (accordion) */ .v3-nav-parent { cursor: pointer; user-select: none; } .v3-nav-parent .v3-chevron { margin-left: auto; width: 14px; height: 14px; color: var(--v3-text-dim); transition: transform .2s ease; flex: 0 0 14px; } .v3-nav-parent.is-open .v3-chevron { transform: rotate(90deg); color: var(--v3-accent-3); } .v3-nav-parent.has-active-child:not(.is-open) .v3-chevron { color: var(--v3-accent-3); } .v3-nav-sub { display: none; flex-direction: column; gap: 1px; padding-left: 44px; margin: 2px 0 6px; position: relative; } .v3-nav-sub.is-open { display: flex; } .v3-nav-sub::before { content: ''; position: absolute; left: 26px; top: 4px; bottom: 4px; width: 1px; background: var(--v3-border); } .v3-nav-sub a { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; color: var(--v3-text-muted); font-size: 12px; text-decoration: none; transition: all .15s ease; position: relative; } .v3-nav-sub a::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--v3-text-dim); flex: 0 0 4px; transition: all .15s ease; } .v3-nav-sub a:hover { background: var(--v3-surface-h); color: var(--v3-text); } .v3-nav-sub a:hover::before { background: var(--v3-accent-3); } .v3-nav-sub a.is-active { color: var(--v3-accent-3); font-weight: 600; } .v3-nav-sub a.is-active::before { background: var(--v3-accent); box-shadow: 0 0 0 3px rgba(0,95,255,.18); } /* Sidebar foot (collapse toggle) */ .v3-sidebar-foot { padding: 12px; border-top: 1px solid var(--v3-border); display: flex; gap: 4px; } .v3-sidebar-foot .v3-icon-btn { flex: 1; } /* Collapsed */ .v3-root.is-collapsed .v3-sidebar { width: 76px; } .v3-root.is-collapsed .v3-sidebar-head { justify-content: center; padding: 14px 0; } .v3-root.is-collapsed .v3-brand-logo-img { max-width: 44px; height: 28px; } .v3-root.is-collapsed .v3-sidebar .v3-brand-text, .v3-root.is-collapsed .v3-sidebar .v3-nav-group-title, .v3-root.is-collapsed .v3-sidebar .v3-nav-sub, .v3-root.is-collapsed .v3-sidebar .v3-nav-item-label, .v3-root.is-collapsed .v3-sidebar .v3-nav-badge { display: none; } .v3-root.is-collapsed .v3-sidebar .v3-nav-item { justify-content: center; padding: 9px; gap: 0; } .v3-root.is-collapsed .v3-sidebar .v3-nav-item.is-active::before { display: none; } .v3-root.is-collapsed .v3-sidebar-foot svg { transform: rotate(180deg); } .v3-sidebar-foot svg { transition: transform .25s ease; } /* ---------- Main --------------------------------------------------------- */ .v3-main { grid-area: main; padding: 24px 28px; min-width: 0; } /* ---------- Footer ------------------------------------------------------- */ .v3-footer { grid-area: footer; padding: 14px 28px; font-size: 11px; color: var(--v3-text-dim); border-top: 1px solid var(--v3-border); background: var(--v3-topbar-bg); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .v3-footer a { color: var(--v3-text-muted); } .v3-footer a:hover { color: var(--v3-text); } /* ---------- Responsive --------------------------------------------------- */ @media (max-width: 900px) { .v3-root { grid-template-columns: 1fr; grid-template-rows: 60px 1fr auto; grid-template-areas: "topbar" "main" "footer"; } .v3-sidebar { position: fixed; top: 0; left: 0; height: 100vh; transform: translateX(-100%); z-index: 60; transition: transform .25s ease; } .v3-root.is-sidebar-open .v3-sidebar { transform: translateX(0); } .v3-root.is-sidebar-open::after { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 55; } .v3-breadcrumb { display: none; } .v3-user-name { display: none; } } /* ---------- Botões (action pill na topbar) ------------------------------- */ .v3-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: 8px; color: var(--v3-text); font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: all .15s ease; text-decoration: none; } .v3-btn:hover { background: var(--v3-surface-h); border-color: var(--v3-border-str); color: var(--v3-text); } .v3-btn:disabled, .v3-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; } .v3-btn svg { width: 14px; height: 14px; flex: 0 0 14px; } .v3-btn .v3-btn-badge { background: var(--v3-accent); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 999px; line-height: 1; } .v3-btn.is-primary { background: var(--v3-accent); border-color: var(--v3-accent); color: #fff; box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--v3-accent) 60%, transparent); } .v3-btn.is-primary:hover { background: var(--v3-accent-3); border-color: var(--v3-accent-3); } .v3-btn.is-ghost { background: transparent; } /* Override da regra global "body.v3 a { color: accent-2 }" quando um link usa .v3-btn (senão o texto do botão primário ficava azul sobre azul). */ html[data-theme] body.v3 a.v3-btn { color: var(--v3-text); text-decoration: none; } html[data-theme] body.v3 a.v3-btn:hover { color: var(--v3-text); } html[data-theme] body.v3 a.v3-btn.is-primary, html[data-theme] body.v3 a.v3-btn.is-primary:hover { color: #fff; } html[data-theme] body.v3 a.v3-btn.is-ghost { color: var(--v3-text-muted); } html[data-theme] body.v3 a.v3-btn.is-ghost:hover { color: var(--v3-text); } @media (max-width: 900px) { .v3-btn-label { display: none; } .v3-btn { padding: 0 10px; } } /* ---------- Drawer (slide-in right) -------------------------------------- */ .v3-drawer-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 70; } .v3-drawer-backdrop.open { opacity: 1; pointer-events: auto; } .v3-drawer { position: fixed; top: 0; right: 0; width: 420px; max-width: 94vw; height: 100vh; background: var(--v3-sidebar-bg); backdrop-filter: blur(18px); border-left: 1px solid var(--v3-border-str); box-shadow: -20px 0 40px -12px rgba(0,0,0,.4); transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); z-index: 71; display: flex; flex-direction: column; } .v3-drawer.open { transform: translateX(0); } .v3-drawer-head { padding: 18px 22px; border-bottom: 1px solid var(--v3-border); display: flex; align-items: center; justify-content: space-between; } .v3-drawer-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin: 0; color: var(--v3-text); } .v3-drawer-subtitle { font-size: 11px; color: var(--v3-text-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; } .v3-drawer-body { padding: 20px 22px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 16px; } .v3-drawer-foot { padding: 14px 22px; border-top: 1px solid var(--v3-border); display: flex; gap: 10px; justify-content: flex-end; background: var(--v3-topbar-bg); } /* ---------- Form controls ------------------------------------------------ */ .v3-field { display: flex; flex-direction: column; gap: 6px; } .v3-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--v3-text-muted); } .v3-input, .v3-select { background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: 8px; padding: 10px 12px; color: var(--v3-text); font-family: inherit; font-size: 13px; transition: all .15s ease; appearance: none; -webkit-appearance: none; } .v3-input:focus, .v3-select:focus { outline: none; border-color: var(--v3-accent); box-shadow: 0 0 0 3px rgba(0,95,255,.15); } .v3-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; } [data-theme="light"] .v3-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } .v3-select option { background: var(--v3-bg-2); color: var(--v3-text); } /* ---------- Page head (bloco de título + ações) -------------------------- */ .v3-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } .v3-page-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--v3-text); } .v3-page-subtitle { font-size: 12px; color: var(--v3-text-muted); margin: 4px 0 0; } .v3-note { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--v3-surface); border: 1px solid var(--v3-border); border-left: 3px solid var(--v3-amber); border-radius: 8px; font-size: 12px; color: var(--v3-text-muted); margin-bottom: 14px; } /* ---------- DataTables tema V3 ------------------------------------------- */ .v3-datatable.dataTables_wrapper { width: 100% !important; margin: 0 !important; color: var(--v3-text); font-family: inherit; font-size: 12px; } .v3-datatable .dataTables_length, .v3-datatable .dataTables_filter, .v3-datatable .dataTables_info, .v3-datatable .dataTables_paginate { color: var(--v3-text-muted); } .v3-datatable .dataTables_filter { float: right; margin-bottom: 12px; } .v3-datatable .dataTables_filter label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; } .v3-datatable .dataTables_filter input, .v3-datatable .dt-search input { background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: 8px; padding: 8px 12px; color: var(--v3-text); font-family: inherit; font-size: 12px; min-width: 220px; transition: border-color .15s ease, box-shadow .15s ease; } .v3-datatable .dataTables_filter input:focus, .v3-datatable .dt-search input:focus { outline: none; border-color: var(--v3-accent); box-shadow: 0 0 0 3px rgba(0,95,255,.15); } .v3-datatable table.dataTable { border-collapse: separate !important; border-spacing: 0; width: 100% !important; font-size: 12px; } .v3-datatable table.dataTable thead th, .v3-datatable table.dataTable thead td { background: var(--v3-surface); color: var(--v3-text-muted); font-weight: 600; font-size: 11px; /* uppercase removido a pedido — mantém maiúsculas/minúsculas como no texto original */ letter-spacing: 0.02em; border-bottom: 1px solid var(--v3-border-str) !important; border-right: 1px solid var(--v3-border) !important; padding: 10px 8px; white-space: normal; } .v3-datatable table.dataTable thead th:first-child, .v3-datatable table.dataTable thead td:first-child { border-left: 1px solid var(--v3-border) !important; } .v3-datatable table.dataTable thead th.dt-ordering-asc::after, .v3-datatable table.dataTable thead th.dt-ordering-desc::after, .v3-datatable table.dataTable thead th.dt-orderable-asc::after, .v3-datatable table.dataTable thead th.dt-orderable-desc::after { color: var(--v3-text-dim) !important; opacity: .9; } .v3-datatable table.dataTable thead th.dt-ordering-asc::after, .v3-datatable table.dataTable thead th.dt-ordering-desc::after { color: var(--v3-accent-3) !important; opacity: 1; } .v3-datatable table.dataTable tbody td { background: transparent; color: var(--v3-text); border-bottom: 1px solid var(--v3-border); padding: 8px; } /* Zebra V3 — linhas pares com accent translúcido (mesma paleta do EasyUI). Aplica tanto via classe .odd/.even do DataTables quanto via nth-child, pra funcionar com ou sem a opção `stripe` ativada. */ [data-theme="dark"] .v3-datatable table.dataTable tbody tr.even > *, [data-theme="dark"] .v3-datatable table.dataTable tbody tr:nth-child(even) > *, [data-theme="dark"] .v3-datatable table.dataTable.stripe tbody tr.odd > * { /* box-shadow inset ao invés de background-color pra sobrepor o bg das colunas fixas */ box-shadow: inset 0 0 0 9999px rgba(0, 95, 255, 0.12) !important; } [data-theme="light"] .v3-datatable table.dataTable tbody tr.even > *, [data-theme="light"] .v3-datatable table.dataTable tbody tr:nth-child(even) > *, [data-theme="light"] .v3-datatable table.dataTable.stripe tbody tr.odd > * { box-shadow: inset 0 0 0 9999px rgba(0, 95, 255, 0.06) !important; } /* Linha ímpar explícita transparente (anula heranças do DataTables) */ [data-theme="dark"] .v3-datatable table.dataTable tbody tr.odd > *:not(.dtfc-fixed-left):not(.dtfc-fixed-right) { background: transparent; } /* Hover — cinza neutro (invertido do accent), consistente com o EasyUI */ [data-theme="dark"] .v3-datatable table.dataTable tbody tr:hover > * { box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.10) !important; } [data-theme="dark"] .v3-datatable table.dataTable tbody tr.even:hover > *, [data-theme="dark"] .v3-datatable table.dataTable tbody tr:nth-child(even):hover > * { box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.14) !important; } [data-theme="light"] .v3-datatable table.dataTable tbody tr:hover > * { box-shadow: inset 0 0 0 9999px rgba(15, 23, 42, 0.06) !important; } /* fixedColumns override para dark/light (precisa vir DEPOIS das zebras pra manter o fundo sólido das colunas fixas quando não há hover/zebra) */ .v3-datatable .dtfc-fixed-left, .v3-datatable .dtfc-fixed-right { background: var(--v3-bg-2) !important; } [data-theme="light"] .v3-datatable .dtfc-fixed-left, [data-theme="light"] .v3-datatable .dtfc-fixed-right { background: #FFFFFF !important; } /* Linha destacada (grupo) */ .v3-datatable tr.v3-row-group td, .v3-datatable tr.v3-row-group .dtfc-fixed-left, .v3-datatable tr.v3-row-group .dtfc-fixed-right { background: rgba(16,185,129,.15) !important; color: var(--v3-text) !important; font-weight: 700; border-bottom-color: rgba(16,185,129,.35) !important; } [data-theme="light"] .v3-datatable tr.v3-row-group td, [data-theme="light"] .v3-datatable tr.v3-row-group .dtfc-fixed-left, [data-theme="light"] .v3-datatable tr.v3-row-group .dtfc-fixed-right { background: #ECFDF5 !important; color: #065F46 !important; } .v3-datatable .dataTables_info { padding-top: 14px; font-size: 11px; } .v3-datatable .dataTables_paginate { padding-top: 10px; } .v3-datatable .dataTables_paginate .paginate_button { padding: 6px 10px !important; border-radius: 6px !important; color: var(--v3-text-muted) !important; border: 1px solid transparent !important; background: transparent !important; margin: 0 2px; font-size: 12px; } .v3-datatable .dataTables_paginate .paginate_button:hover { background: var(--v3-surface-h) !important; color: var(--v3-text) !important; border-color: var(--v3-border) !important; } .v3-datatable .dataTables_paginate .paginate_button.current, .v3-datatable .dataTables_paginate .paginate_button.current:hover { background: var(--v3-accent) !important; color: #fff !important; border-color: var(--v3-accent) !important; } .v3-datatable .dataTables_paginate .paginate_button.disabled { opacity: .4; cursor: not-allowed; } /* Wrapper rolagem */ .v3-table-wrap { background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: 14px; padding: 16px; backdrop-filter: blur(12px); overflow: hidden; } /* ---------- EasyUI DataGrid tema V3 (override completo) ----------------- */ .v3-table-wrap .datagrid, .v3-table-wrap .datagrid-view, .v3-table-wrap .datagrid-view1, .v3-table-wrap .datagrid-view2, .v3-table-wrap .datagrid-wrap, .v3-table-wrap .panel-body, .v3-table-wrap .datagrid-body, .v3-table-wrap .datagrid-footer, .v3-table-wrap .datagrid-pager { background: transparent !important; color: var(--v3-text) !important; border-color: var(--v3-border) !important; } /* Header do grid: surface sutil com separador inferior */ .v3-table-wrap .datagrid-header, .v3-table-wrap .datagrid-header-inner { background: var(--v3-surface-h) !important; border-color: var(--v3-border) !important; border-bottom: 1px solid var(--v3-border-str) !important; } .v3-table-wrap .datagrid-header td, .v3-table-wrap .datagrid-header .datagrid-cell, .v3-table-wrap .datagrid-header-inner .datagrid-cell, .v3-table-wrap .datagrid-header .datagrid-cell span, .v3-table-wrap .datagrid-header-inner .datagrid-cell span { background: transparent !important; color: var(--v3-text-muted) !important; border-color: var(--v3-border) !important; font-weight: 600 !important; font-size: 11px !important; letter-spacing: 0.02em; text-transform: uppercase; } /* Tabela base do EasyUI define color:#333 — neutraliza isso */ .v3-table-wrap .datagrid-btable, .v3-table-wrap .datagrid-ftable, .v3-table-wrap .datagrid-row, .v3-table-wrap .datagrid-row-alt, .v3-table-wrap .datagrid-row-over, .v3-table-wrap .datagrid-body tr { color: var(--v3-text) !important; } /* Linhas do body — cor do texto forçada em QUALQUER combinação de seletor */ .v3-table-wrap .datagrid-body td, .v3-table-wrap .datagrid-body .datagrid-cell, .v3-table-wrap .datagrid-body .datagrid-cell-c, .v3-table-wrap .datagrid-body tr td, .v3-table-wrap .datagrid-row td, .v3-table-wrap .datagrid-row .datagrid-cell, .v3-table-wrap .datagrid-row-alt td, .v3-table-wrap .datagrid-row-alt .datagrid-cell, .v3-table-wrap .datagrid-body tr.datagrid-row-alt td .datagrid-cell, .v3-table-wrap .datagrid-body tr.datagrid-row-alt td .datagrid-cell span, .v3-table-wrap .datagrid-body .datagrid-cell span, .v3-table-wrap .datagrid-body .datagrid-cell a:not(.v3-btn):not([class*="v3-ico"]) { color: var(--v3-text) !important; border-color: var(--v3-border) !important; } /* Zebra — combina classe do EasyUI (.datagrid-row-alt) + nth-child como fallback, pra garantir que TODAS as linhas pares recebam o estilo azul (evita o bug onde o striped do EasyUI só aplicava a classe na 1ª linha alternada visível). */ .v3-table-wrap .datagrid-body tr td { background: transparent !important; } [data-theme="dark"] .v3-table-wrap .datagrid-row-alt td, [data-theme="dark"] .v3-table-wrap .datagrid-body tr:nth-child(even) td, [data-theme="dark"] .v3-table-wrap .datagrid-btable > tbody > tr:nth-child(even) td, [data-theme="dark"] .v3-table-wrap .datagrid-ftable > tbody > tr:nth-child(even) td { background-color: rgba(0, 95, 255, 0.12) !important; } [data-theme="light"] .v3-table-wrap .datagrid-row-alt td, [data-theme="light"] .v3-table-wrap .datagrid-body tr:nth-child(even) td, [data-theme="light"] .v3-table-wrap .datagrid-btable > tbody > tr:nth-child(even) td, [data-theme="light"] .v3-table-wrap .datagrid-ftable > tbody > tr:nth-child(even) td { background-color: rgba(0, 95, 255, 0.06) !important; } /* Força a cor do texto em QUALQUER descendente de td no body do grid. Usa * para cobrir divs/spans/labels que o EasyUI pode usar e que estavam com color herdado mais escuro. Preserva badges/chips via :not(). */ [data-theme="dark"] .v3-table-wrap .datagrid-body tr, [data-theme="dark"] .v3-table-wrap .datagrid-body td, [data-theme="dark"] .v3-table-wrap .datagrid-body td *:not(.v3-ico-badge):not(.v3-chip):not(svg):not(path):not(polyline):not(circle):not(line):not(rect) { color: #F1F5F9 !important; opacity: 1 !important; filter: none !important; } /* Preserva a cor própria dos badges/chips coloridos (âmbar, verde, accent, muted) */ [data-theme="dark"] .v3-table-wrap .v3-ico-badge, [data-theme="dark"] .v3-table-wrap .v3-ico-badge svg, [data-theme="dark"] .v3-table-wrap .v3-chip { color: inherit !important; } [data-theme="dark"] .v3-table-wrap .v3-ico-badge.is-amber { color: #fcd34d !important; } [data-theme="dark"] .v3-table-wrap .v3-ico-badge.is-green { color: #34d399 !important; } [data-theme="dark"] .v3-table-wrap .v3-ico-badge.is-red { color: #fca5a5 !important; } [data-theme="dark"] .v3-table-wrap .v3-ico-badge.is-accent { color: var(--v3-accent-3, #60A5FA) !important; } [data-theme="dark"] .v3-table-wrap .v3-ico-badge.is-muted { color: var(--v3-text) !important; } /* Hover — usa tom accent translúcido (em vez de surface-h, que em light é quase branco). Aplica em td/span/cell para derrotar o #e6e6e6 + color:#00438a do EasyUI default. */ .v3-table-wrap .datagrid-row-over, .v3-table-wrap .datagrid-row-over td, .v3-table-wrap .datagrid-row.datagrid-row-over, .v3-table-wrap .datagrid-row.datagrid-row-over td, .v3-table-wrap .datagrid-row-over .datagrid-cell, .v3-table-wrap .datagrid-row-over .datagrid-cell-c, .v3-table-wrap .datagrid-row.datagrid-row-over .datagrid-cell, .v3-table-wrap .datagrid-row.datagrid-row-over .datagrid-cell span, .v3-table-wrap .datagrid-row.datagrid-row-over .datagrid-cell-c span { background-color: color-mix(in srgb, var(--v3-accent) 14%, transparent) !important; color: var(--v3-text) !important; } /* No dark, hover em cinza neutro — contraste claro contra o zebra azul. */ [data-theme="dark"] .v3-table-wrap .datagrid-row-over td, [data-theme="dark"] .v3-table-wrap .datagrid-row.datagrid-row-over td { background-color: rgba(255, 255, 255, 0.10) !important; color: var(--v3-text) !important; } /* Hover em linha alt (que já tem tom azul): cinza ainda mais nítido pra cancelar o azul e comunicar claramente o estado hover. */ [data-theme="dark"] .v3-table-wrap .datagrid-row-alt.datagrid-row-over td { background-color: rgba(255, 255, 255, 0.14) !important; } /* Seleção */ .v3-table-wrap .datagrid-row-selected, .v3-table-wrap .datagrid-row-selected td, .v3-table-wrap .datagrid-row.datagrid-row-selected td, .v3-table-wrap .datagrid-row-selected .datagrid-cell, .v3-table-wrap .datagrid-row-selected .datagrid-cell span { background-color: color-mix(in srgb, var(--v3-accent) 24%, transparent) !important; color: var(--v3-text) !important; } .v3-table-wrap .datagrid-row-selected td:first-child { box-shadow: inset 3px 0 0 0 var(--v3-accent); } /* Panel wrapper */ .v3-table-wrap .panel, .v3-table-wrap .panel-body { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Inputs do easyUI (filtros, modais) */ .v3-table-wrap .textbox, .v3-table-wrap .validatebox-text, .v3-table-wrap .combo, .v3-table-wrap .numberbox, .v3-table-wrap .datebox { background: var(--v3-surface) !important; border: 1px solid var(--v3-border-str) !important; color: var(--v3-text) !important; border-radius: 6px !important; } /* Paginação */ .v3-table-wrap .pagination, .v3-table-wrap .pagination-info, .v3-table-wrap .pagination-page-list, .v3-table-wrap .pagination a, .v3-table-wrap .pagination span { color: var(--v3-text-muted) !important; } .v3-table-wrap .pagination { background: var(--v3-surface-h) !important; border-top: 1px solid var(--v3-border) !important; } .v3-table-wrap .pagination .pagination-num { background: var(--v3-surface) !important; border: 1px solid var(--v3-border-str) !important; color: var(--v3-text) !important; border-radius: 6px !important; } /* Linha de filtros EasyUI */ .v3-table-wrap .datagrid-filter-row, .v3-table-wrap .datagrid-filter-row td { background: var(--v3-surface) !important; border-color: var(--v3-border) !important; } .v3-table-wrap .datagrid-filter-row input { background: var(--v3-bg-2, var(--v3-surface-h)) !important; color: var(--v3-text) !important; border: 1px solid var(--v3-border-str) !important; border-radius: 4px !important; } /* Ícones do EasyUI (setas de ordenação, filtro) com cor do tema */ .v3-table-wrap .datagrid-header .datagrid-sort-icon, .v3-table-wrap .datagrid-header .datagrid-sort-asc, .v3-table-wrap .datagrid-header .datagrid-sort-desc { filter: none; opacity: .7; } /* Scrollbar do grid — estilo V3 */ .v3-table-wrap .datagrid-body::-webkit-scrollbar { width: 10px; height: 10px; } .v3-table-wrap .datagrid-body::-webkit-scrollbar-track { background: transparent; } .v3-table-wrap .datagrid-body::-webkit-scrollbar-thumb { background: var(--v3-border-str); border-radius: 6px; } .v3-table-wrap .datagrid-body::-webkit-scrollbar-thumb:hover { background: var(--v3-text-muted); } /* ---------- Card base (reusable) ----------------------------------------- */ .v3-ui-card { background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: 14px; padding: 18px; backdrop-filter: blur(12px); box-shadow: var(--v3-shadow-sm); } /* ---------- Filtros ativos (chips) --------------------------------------- */ .v3-filter-chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin: 0 0 14px 0; background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: 12px; backdrop-filter: blur(8px); } .v3-filter-chips-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: none; background: transparent; color: var(--v3-text-muted); font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; cursor: pointer; border-radius: 8px; transition: color .15s ease, background .15s ease; } .v3-filter-chips-trigger:hover { color: var(--v3-text); background: var(--v3-surface-h); } .v3-filter-chips-list { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-width: 0; } .v3-filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--v3-border-str); background: var(--v3-surface-h); color: var(--v3-text); border-radius: 999px; font-size: 12px; line-height: 1.4; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .08s ease; max-width: 320px; } .v3-filter-chip:hover { border-color: var(--v3-accent); background: color-mix(in srgb, var(--v3-accent) 10%, var(--v3-surface-h)); } .v3-filter-chip:active { transform: translateY(1px); } .v3-filter-chip-k { font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--v3-text-muted); } .v3-filter-chip-v { font-weight: 600; color: var(--v3-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; } @media (max-width: 720px) { .v3-filter-chips { padding: 8px 10px; } .v3-filter-chip { max-width: 100%; } .v3-filter-chip-v { max-width: 160px; } } /* ---------- Legenda (dots coloridos + texto) ----------------------------- */ .v3-legend { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--v3-text-muted); } .v3-legend-item { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: 999px; } .v3-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); } .v3-dot.is-red { background: var(--v3-red, #ef4444); color: var(--v3-red, #ef4444); } .v3-dot.is-gray { background: var(--v3-text-muted); color: var(--v3-text-muted); } .v3-dot.is-green { background: var(--v3-green, #10b981); color: var(--v3-green, #10b981); } .v3-dot.is-amber { background: var(--v3-amber, #f59e0b); color: var(--v3-amber, #f59e0b); } .v3-dot.is-accent { background: var(--v3-accent); color: var(--v3-accent); } /* ---------- Badge de ícone (quadrado arredondado com cor) ---------------- */ .v3-ico-badge { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; transition: transform .14s ease, box-shadow .14s ease, background .14s ease; vertical-align: middle; } .v3-ico-badge svg { width: 16px; height: 16px; display: block; stroke-width: 2.2; } .v3-ico-badge.is-amber { background: color-mix(in srgb, var(--v3-amber, #f59e0b) 28%, transparent); color: var(--v3-amber, #f59e0b); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v3-amber, #f59e0b) 55%, transparent), 0 1px 2px color-mix(in srgb, var(--v3-amber, #f59e0b) 22%, transparent); } .v3-ico-badge.is-muted { background: var(--v3-surface-h); color: var(--v3-text); box-shadow: inset 0 0 0 1px var(--v3-border-str); } [data-theme="dark"] .v3-ico-badge.is-muted { background: rgba(255,255,255,0.06); } .v3-ico-badge.is-green { background: color-mix(in srgb, var(--v3-green, #10b981) 28%, transparent); color: var(--v3-green, #10b981); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v3-green, #10b981) 55%, transparent), 0 1px 2px color-mix(in srgb, var(--v3-green, #10b981) 22%, transparent); } .v3-ico-badge.is-red { background: color-mix(in srgb, var(--v3-red, #ef4444) 28%, transparent); color: var(--v3-red, #ef4444); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v3-red, #ef4444) 55%, transparent), 0 1px 2px color-mix(in srgb, var(--v3-red, #ef4444) 22%, transparent); } .v3-ico-badge.is-accent { background: color-mix(in srgb, var(--v3-accent) 28%, transparent); color: var(--v3-accent-3, var(--v3-accent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v3-accent) 55%, transparent), 0 1px 2px color-mix(in srgb, var(--v3-accent) 22%, transparent); } /* no dark, puxa a cor do ícone mais clara pra contrastar */ [data-theme="dark"] .v3-ico-badge.is-accent { color: var(--v3-accent-3, #60A5FA); } [data-theme="dark"] .v3-ico-badge.is-amber { color: #fcd34d; } [data-theme="dark"] .v3-ico-badge.is-green { color: #34d399; } [data-theme="dark"] .v3-ico-badge.is-red { color: #fca5a5; } /* variante clicável dentro de datagrid */ a > .v3-ico-badge, .v3-ico-badge.is-clickable { cursor: pointer; } a:hover > .v3-ico-badge, .v3-ico-badge.is-clickable:hover { transform: scale(1.12); } a:hover > .v3-ico-badge.is-amber, .v3-ico-badge.is-clickable.is-amber:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v3-amber, #f59e0b) 70%, transparent), 0 0 0 4px color-mix(in srgb, var(--v3-amber, #f59e0b) 18%, transparent), 0 4px 12px color-mix(in srgb, var(--v3-amber, #f59e0b) 30%, transparent); } a:hover > .v3-ico-badge.is-green, .v3-ico-badge.is-clickable.is-green:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v3-green, #10b981) 70%, transparent), 0 0 0 4px color-mix(in srgb, var(--v3-green, #10b981) 18%, transparent), 0 4px 12px color-mix(in srgb, var(--v3-green, #10b981) 30%, transparent); } a:hover > .v3-ico-badge.is-red, .v3-ico-badge.is-clickable.is-red:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v3-red, #ef4444) 70%, transparent), 0 0 0 4px color-mix(in srgb, var(--v3-red, #ef4444) 18%, transparent), 0 4px 12px color-mix(in srgb, var(--v3-red, #ef4444) 30%, transparent); } a:hover > .v3-ico-badge.is-accent, .v3-ico-badge.is-clickable.is-accent:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v3-accent) 70%, transparent), 0 0 0 4px color-mix(in srgb, var(--v3-accent) 18%, transparent), 0 4px 12px color-mix(in srgb, var(--v3-accent) 35%, transparent); } a:active > .v3-ico-badge, .v3-ico-badge.is-clickable:active { transform: scale(0.96); } /* ---------- Chip de valor (Sim/Não, status enxuto) ---------------------- */ .v3-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .2px; line-height: 1.5; white-space: nowrap; } .v3-chip.is-green { background: color-mix(in srgb, var(--v3-green, #10b981) 16%, transparent); color: var(--v3-green, #10b981); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v3-green, #10b981) 30%, transparent); } .v3-chip.is-muted { background: var(--v3-surface-h); color: var(--v3-text-muted); box-shadow: inset 0 0 0 1px var(--v3-border-str); } .v3-chip.is-amber { background: color-mix(in srgb, var(--v3-amber, #f59e0b) 16%, transparent); color: var(--v3-amber, #f59e0b); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v3-amber, #f59e0b) 30%, transparent); } .v3-chip.is-red { background: color-mix(in srgb, var(--v3-red, #ef4444) 16%, transparent); color: var(--v3-red, #ef4444); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v3-red, #ef4444) 30%, transparent); } .v3-chip.is-accent{ background: color-mix(in srgb, var(--v3-accent) 16%, transparent); color: var(--v3-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v3-accent) 30%, transparent); } .v3-chip.is-cyan { background: color-mix(in srgb, var(--v3-cyan, #06b6d4) 16%, transparent); color: var(--v3-cyan, #06b6d4); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v3-cyan, #06b6d4) 30%, transparent); } [data-theme="dark"] .v3-chip.is-amber { color: #fcd34d; } [data-theme="dark"] .v3-chip.is-green { color: #34d399; } [data-theme="dark"] .v3-chip.is-red { color: #fca5a5; } [data-theme="dark"] .v3-chip.is-cyan { color: #67e8f9; } /* destaque numérico em colunas de grid */ .v3-num { color: var(--v3-accent); font-weight: 600; } /* ---------- Modal V3 (CSS completo — independente do Bootstrap CSS) ------ */ /* O V3 layout não carrega bootstrap.css; este bloco implementa o .modal do zero */ .v3-modal-wrap.modal { position: fixed !important; inset: 0; z-index: 1060; display: none; overflow: hidden; background: rgba(0, 0, 0, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .v3-modal-wrap.modal.in, .v3-modal-wrap.modal[style*="display: block"], .v3-modal-wrap.modal[style*="display:block"] { display: flex !important; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; overflow-y: auto; } .v3-modal-wrap.modal .modal-dialog { width: 600px; max-width: 100%; margin: 0; pointer-events: none; } .v3-modal-wrap.modal .modal-content { pointer-events: auto; background: var(--v3-bg-2, var(--v3-surface)); border: 1px solid var(--v3-border-str); border-radius: 14px; color: var(--v3-text); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; flex-direction: column; max-height: 84vh; } .v3-modal-wrap.modal .modal-header { border-bottom: 1px solid var(--v3-border); padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .v3-modal-wrap.modal .modal-title { font-size: 15px; font-weight: 600; color: var(--v3-text); margin: 0; display: inline-flex; align-items: center; } .v3-modal-wrap.modal .modal-header .close { color: var(--v3-text-muted); font-size: 22px; line-height: 1; opacity: 1; text-shadow: none; transition: color .15s ease; background: transparent; border: none; cursor: pointer; padding: 4px 8px; } .v3-modal-wrap.modal .modal-header .close:hover { color: var(--v3-text); } .v3-modal-wrap.modal .modal-body { padding: 18px; color: var(--v3-text); font-size: 13px; overflow-y: auto; flex: 1 1 auto; } .v3-modal-wrap.modal .modal-body .form-group { margin-bottom: 14px; } .v3-modal-wrap.modal .modal-body label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--v3-text-muted); margin-bottom: 6px; } .v3-modal-wrap.modal .modal-body .form-control, .v3-modal-wrap.modal .modal-body input[type="text"], .v3-modal-wrap.modal .modal-body input[type="email"], .v3-modal-wrap.modal .modal-body input[type="number"], .v3-modal-wrap.modal .modal-body input[type="tel"] { width: 100%; background: var(--v3-surface); border: 1px solid var(--v3-border-str); border-radius: 8px; padding: 8px 12px; color: var(--v3-text); font-family: inherit; font-size: 13px; transition: border-color .15s ease, background .15s ease; box-shadow: none; } .v3-modal-wrap.modal .modal-body .form-control:focus, .v3-modal-wrap.modal .modal-body input:focus { border-color: var(--v3-accent); outline: none; background: var(--v3-surface-h); box-shadow: 0 0 0 3px color-mix(in srgb, var(--v3-accent) 18%, transparent); } .v3-modal-wrap.modal .modal-body .has-error .form-control, .v3-modal-wrap.modal .modal-body .has-error input { border-color: var(--v3-red, #ef4444); } .v3-modal-wrap.modal .modal-footer { border-top: 1px solid var(--v3-border); padding: 12px 18px; display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0; } /* trava scroll do body enquanto modal aberto */ body.v3-modal-open { overflow: hidden; }