:root { --bg: #060b13; --bg2: #0b1220; --card: #101827; --card2: #121e31; --line: #243249; --txt: #f3f7ff; --mut: #92a3bc; --pri: #6f63ff; --pri2: #8b7eff; --cyan: #22d3ee; --ok: #22c55e; --warn: #facc15; --bad: #fb7185; --blue: #60a5fa; --radius: 18px; --shadow: 0 20px 60px rgba(0, 0, 0, 0.38); /* =================================================================== Variáveis de superfície/tema — introduzidas para suportar o tema claro (ver bloco [data-theme="light"] abaixo). Cada uma abstrai um padrão de cor hardcoded que se repetia dezenas de vezes pelo arquivo (fundos de painel, bordas translúcidas azuis, sombras, brilhos). Os valores aqui são os originais do tema escuro — trocar o tema só sobrescreve estas variáveis, nada mais. =================================================================== */ --surf-0: #060b13; /* fundo geral da página */ --surf-1: #08101d; /* painéis, cards, inputs, tabelas — nível 1 */ --surf-2: #0d1626; /* painéis, modais — nível 2, levemente mais claro */ --surf-3: #101a2c; /* th de tabela, toggles, elementos elevados */ --surf-4: #111c2f; /* hover de itens de lista/menu */ --surf-5: #0c1524; /* coluna fixa da tabela do calendário */ --surf-6: #182338; /* hover de combo/botão secundário */ --surf-7: #20304a; /* borda de allocRow */ --txt-strong: #ffffff; /* branco puro — títulos de destaque, ícones ativos */ --txt-soft: #dbeafe; /* texto azul claro — labels secundários */ --txt-softer: #bfdbfe; --line-soft: #1e2a3f; /* divisórias sutis (bordas de tabela) */ --shine: rgba(255, 255, 255, 0.06); /* brilho/realce sutil sobre superfície escura */ --shine-strong: rgba(255, 255, 255, 0.08); --shadow-soft: rgba(0, 0, 0, 0.18); --shadow-strong: rgba(0, 0, 0, 0.3); --overlay: rgba(0, 0, 0, 0.65); /* fundo do backdrop de modal */ --overlay-soft: rgba(2, 6, 12, 0.48); /* backdrop de loading global */ --accent-rgb: 96, 165, 250; /* componentes RGB de --blue, para usar em rgba() */ --hero-gradient: linear-gradient(165deg, #0d1626, #060b13 78%); --hero-radial-1: rgba(34, 211, 238, 0.32); --hero-radial-2: rgba(111, 99, 255, 0.4); --panel-rgb: 8, 16, 29; --panel-rgb-2: 16, 24, 39; --capacity-col-rgb: 20, 30, 55; --hero-radial-bg: #172955; --c-ok-text: #86efac; --c-warn-text: #fde68a; --c-info-text: #93c5fd; --c-bad-text: #fda4af; --c-holiday-text: #fde68a; --c-leadership-text: #d8b4fe; --c-travel-text: #fed7aa; --c-displacement-text: #a5f3fc; } /* ========================================================= Tema claro — ativado via [data-theme="light"] no . Sobrescreve somente as variáveis de superfície/texto; cores de acento e de status (chips, badges) usam tons equivalentes calibrados para fundo claro nas regras específicas abaixo. ========================================================= */ html[data-theme="light"] { --bg: #eef2f9; --bg2: #e3e9f4; --card: #ffffff; --card2: #f3f6fb; --line: #d7dfec; --txt: #16213a; --mut: #5b6b85; --pri: #5b4fe0; --pri2: #7a6dfb; --cyan: #0891b2; --ok: #16a34a; --warn: #b45309; --bad: #e11d48; --blue: #2563eb; --shadow: 0 20px 50px rgba(30, 41, 59, 0.12); --surf-0: #eef2f9; --surf-1: #ffffff; --surf-2: #ffffff; --surf-3: #e9eef8; --surf-4: #e3e9f4; --surf-5: #f3f6fb; --surf-6: #dbe3f1; --surf-7: #d7dfec; --txt-strong: #0b1220; --txt-soft: #1e3a6e; --txt-softer: #2f4f86; --line-soft: #e2e8f3; --shine: rgba(15, 23, 42, 0.04); --shine-strong: rgba(15, 23, 42, 0.06); --shadow-soft: rgba(30, 41, 59, 0.08); --shadow-strong: rgba(30, 41, 59, 0.14); --overlay: rgba(15, 23, 42, 0.45); --overlay-soft: rgba(15, 23, 42, 0.22); --accent-rgb: 37, 99, 235; --hero-gradient: linear-gradient(165deg, #f3f6fb, #eef2f9 78%); --hero-radial-1: rgba(8, 145, 178, 0.16); --hero-radial-2: rgba(91, 79, 224, 0.16); --panel-rgb: 255, 255, 255; --panel-rgb-2: 255, 255, 255; --capacity-col-rgb: 255, 255, 255; --hero-radial-bg: #c7d8f5; --c-ok-text: #15803d; --c-warn-text: #92400e; --c-info-text: #1d4ed8; --c-bad-text: #be123c; --c-holiday-text: #92400e; --c-leadership-text: #7e22ce; --c-travel-text: #c2410c; --c-displacement-text: #0e7490; } * { box-sizing: border-box; } body { margin: 0; background: radial-gradient(circle at 0 0, var(--hero-radial-bg) 0, var(--bg) 42%), var(--bg); color: var(--txt); font-family: Inter, Segoe UI, Arial, sans-serif; } button, input, select, textarea { font: inherit; } .hidden { display: none !important; } .muted { color: var(--mut); } .login { height: 100vh; height: 100dvh; display: grid; place-items: stretch; overflow: hidden; } .loginbox { width: 100%; height: 100vh; height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(380px, 1fr); background: rgba(var(--panel-rgb-2), 0.92); overflow: hidden; } .hero { padding: clamp(20px, 4vw, 40px); background: radial-gradient( circle at 85% -10%, rgba(34, 211, 238, 0.32), transparent 55% ), radial-gradient( circle at -10% 110%, rgba(111, 99, 255, 0.4), transparent 60% ), var(--hero-gradient); position: relative; display: flex; flex-direction: column; justify-content: center; overflow: hidden; border-right: 1px solid var(--shine); } .heroTop { margin-bottom: clamp(16px, 3vw, 28px); } .heroTop .heroLogo { display: block; height: clamp(40px, 5vw, 56px); width: auto; padding: 12px 18px; border-radius: 14px; background: #fff; box-shadow: 0 10px 28px var(--shadow-strong); } .hero h1 { font-size: clamp(22px, 3vw, 32px); line-height: 1.16; margin: 0 0 10px; max-width: 480px; font-weight: 900; } .hero h1 em { font-style: normal; background: linear-gradient(120deg, var(--cyan), #9be8ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero > p.heroLede { max-width: 460px; color: var(--mut); line-height: 1.55; font-size: 13px; margin: 0 0 clamp(16px, 3vw, 26px); } .heroFeatures { display: grid; gap: 10px; } .heroFeature { display: flex; gap: 12px; align-items: flex-start; padding: 11px 13px; border: 1px solid var(--shine-strong); border-radius: 14px; background: var(--shine); } .heroFeature .heroFeatureIcon { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; background: linear-gradient( 135deg, rgba(111, 99, 255, 0.35), rgba(34, 211, 238, 0.22) ); color: var(--txt-soft); } .heroFeature b { display: block; font-size: 12.5px; margin-bottom: 2px; } .heroFeature span { display: block; color: var(--mut); font-size: 11.5px; line-height: 1.45; } .form { padding: clamp(20px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .formHead { margin-bottom: clamp(18px, 3vw, 26px); } .formHead h2 { font-size: clamp(20px, 2.6vw, 25px); margin: 0 0 6px; font-weight: 900; letter-spacing: -0.01em; } .formHead p { margin: 0; color: var(--mut); font-size: 13px; } .loginActions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; } .loginActions .btn { width: auto; } .configMenuWrap { position: relative; } .pbConfigPanel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; width: min(380px, calc(100vw - 48px)); padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surf-2); box-shadow: var(--shadow); } .pbConfigPanel::before { content: ""; position: absolute; right: 22px; top: -8px; width: 14px; height: 14px; background: var(--surf-2); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); } .connectionRow { display: flex; align-items: center; gap: 8px; justify-content: space-between; flex-wrap: wrap; } .configLink { border: 1px solid var(--line); background: var(--surf-4); color: var(--txt); border-radius: 999px; padding: 7px 11px; font-size: 12px; font-weight: 900; cursor: pointer; } .field { margin: 13px 0; } .field label { display: block; font-size: 12px; color: var(--mut); font-weight: 800; margin-bottom: 7px; } .input, .select, textarea { width: 100%; border: 1px solid var(--line); background: var(--surf-1); color: var(--txt); border-radius: 13px; padding: 12px; outline: none; } .input:focus, .select:focus, textarea:focus { border-color: var(--pri); } .input[type="date"] { padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2392a3bc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 20px; } .input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; width: 38px; height: 38px; cursor: pointer; position: absolute; right: 4px; } .input[type="date"] { position: relative; cursor: text; } .btn { border: 0; border-radius: 13px; padding: 11px 15px; background: linear-gradient(135deg, var(--pri), var(--pri2)); color: #fff; font-weight: 900; cursor: pointer; } .btn.secondary { background: var(--surf-6); color: var(--txt); } .btn.green { background: linear-gradient(135deg, #16a34a, #22c55e); } .btn.red { background: linear-gradient(135deg, #e11d48, #fb7185); } .btn.small { padding: 8px 10px; border-radius: 10px; font-size: 12px; } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .hint { font-size: 12px; color: var(--mut); border: 1px solid var(--line); background: var(--surf-1); border-radius: 14px; padding: 13px; margin-top: 14px; line-height: 1.5; } .profileList { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } .profileRow { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surf-1); border-radius: 12px; padding: 8px 10px; } .profileRow.active { border-color: var(--pri); } .profileRow .profileInfo { flex: 1; min-width: 0; cursor: pointer; } .profileRow .profileName { font-weight: 800; font-size: 13px; } .profileRow .profileUrl { font-size: 11px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .profileRow .profileActiveTag { font-size: 10px; font-weight: 900; color: var(--pri); } .profileRow .btn.small { flex-shrink: 0; } .app { min-height: 100vh; display: grid; grid-template-columns: 280px 1fr; } /* Recolher menu lateral: zera a coluna do grid e esconde o conteúdo interno do .side, deixando só uma faixa fina com o botão para reabrir. Funciona tanto no layout base quanto nos breakpoints de .app definidos mais abaixo (cada um redeclara grid-template-columns com a largura normal do menu; aqui sobrescrevemos para 0). */ .app.sidebar-collapsed { grid-template-columns: 0px 1fr; } .app.sidebar-collapsed .side { padding: 0; border-right: none; overflow: hidden; } .app.sidebar-collapsed .side > * { display: none; } .sidebarToggle { position: fixed; top: 30px; left: 268px; z-index: 50; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surf-3); color: var(--txt); cursor: pointer; font-size: 12px; transition: left 0.18s ease; box-shadow: 0 6px 16px var(--shadow-strong); } .sidebarToggle:hover { background: var(--surf-6); } .app.sidebar-collapsed .sidebarToggle { left: 12px; top: 18px; } .app.sidebar-collapsed .main { padding-left: 52px; } .side { height: 100vh; position: sticky; top: 0; background: rgba(var(--panel-rgb), 0.92); border-right: 1px solid var(--line); padding: 22px; } .logo { display: flex; gap: 12px; align-items: center; margin-bottom: 26px; } .mark { width: 42px; height: 42px; border-radius: 15px; background: linear-gradient(135deg, var(--pri), var(--cyan)); display: grid; place-items: center; font-weight: 1000; } .logo span { display: block; color: var(--mut); font-size: 12px; } .brandLogo { align-items: center; gap: 11px; } .brandImage { width: 48px; height: 48px; object-fit: contain; border-radius: 14px; background: #f8fafc; border: 1px solid var(--line); padding: 7px; box-shadow: 0 8px 22px var(--shadow-strong); } .brandImageSidebar { display: block; height: 40px; width: auto; object-fit: contain; border-radius: 12px; background: #fff; padding: 8px 12px; box-shadow: 0 6px 18px var(--shadow-soft); } .brandLogo b { letter-spacing: -0.02em; } .viewerLocked { opacity: 0.55; pointer-events: none; } .nav button { width: 100%; text-align: left; margin: 5px 0; background: transparent; border: 1px solid transparent; color: var(--mut); padding: 12px; border-radius: 13px; font-weight: 850; cursor: pointer; } .nav button.active, .nav button:hover { background: var(--surf-4); border-color: var(--line); color: var(--txt); } .userbox { position: absolute; bottom: 20px; left: 20px; right: 20px; border: 1px solid var(--line); background: var(--surf-2); border-radius: 16px; padding: 14px; font-size: 13px; } .themeToggleRow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } .themeToggleLabel { color: var(--mut); font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 6px; } .themeToggle { position: relative; width: 46px; height: 24px; border-radius: 999px; border: 1px solid var(--line); background: var(--surf-4); cursor: pointer; flex: 0 0 auto; padding: 0; } .themeToggle .themeToggleKnob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--pri), var(--pri2)); display: grid; place-items: center; color: #fff; font-size: 10px; transition: left 0.18s ease, background 0.18s ease; } html[data-theme="light"] .themeToggle .themeToggleKnob { left: 24px; background: linear-gradient(135deg, #fbbf24, #f59e0b); } .main { padding: 24px; overflow: auto; } .top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 18px; } .top h1 { margin: 0; font-size: 28px; } .dashboardFilters { margin: 14px 0 22px; padding: 16px; border: 1px solid rgba(var(--accent-rgb), 0.22); border-radius: 18px; background: linear-gradient( 180deg, rgba(var(--capacity-col-rgb), 0.78), rgba(var(--panel-rgb), 0.64) ), rgba(var(--panel-rgb-2), 0.72); box-shadow: 0 14px 34px var(--shadow-soft); } .dashboardFiltersHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .dashboardFiltersHead h3 { margin: 0; font-size: 15px; letter-spacing: -0.01em; } .dashboardFiltersHead span { color: var(--mut); font-size: 12px; } .dashboardFilters .toolbar { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; align-items: end; } .dashboardFilters .toolbar .field { min-width: 0; width: 100%; } .dashboardFilters .toolbar .btn { height: 42px; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 14px; margin-bottom: 18px; } .card { background: linear-gradient( 145deg, rgba(var(--panel-rgb-2), 0.96), rgba(var(--panel-rgb), 0.9) ); border: 1px solid rgba(var(--accent-rgb), 0.17); border-radius: var(--radius); padding: 17px; box-shadow: 0 12px 34px var(--shadow-strong); position: relative; overflow: hidden; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .card::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at 18% 0%, rgba(var(--accent-rgb), 0.16), transparent 34% ); opacity: 0.85; pointer-events: none; } .card::after { content: ""; position: absolute; top: -45%; left: -60%; width: 42%; height: 190%; background: linear-gradient( 90deg, transparent, var(--shine-strong), transparent ); transform: rotate(18deg); transition: left 0.65s ease; pointer-events: none; } .card:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb), 0.38); box-shadow: 0 18px 45px var(--shadow-strong); } .card:hover::after { left: 118%; } .card > * { position: relative; z-index: 1; } .metric { font-size: 30px; font-weight: 1000; margin-top: 7px; letter-spacing: -0.04em; } .metricHint { display: block; margin-top: 6px; color: var(--mut); font-size: 12px; line-height: 1.35; } .bar { height: 9px; background: var(--surf-1); border-radius: 99px; overflow: hidden; margin-top: 12px; } .bar i { height: 100%; display: block; background: linear-gradient(90deg, var(--pri), var(--cyan)); border-radius: 99px; } .toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin: 15px 0; } .toolbar .field { margin: 0; min-width: 185px; } .calendarToolbar { display: grid; grid-template-columns: minmax(140px, 0.8fr) minmax(140px, 0.8fr) minmax(220px, 1.6fr) minmax(220px, 1.6fr) minmax(160px, 1fr) auto; gap: 14px; align-items: end; width: 100%; } .calendarToolbar .field { min-width: 0; width: 100%; } .combo { position: relative; } .combo input.comboInput { width: 100%; } .comboList { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 13px; background: var(--surf-2); box-shadow: var(--shadow); padding: 6px; } .comboList.hidden { display: none; } .comboOption { padding: 9px 11px; border-radius: 10px; cursor: pointer; font-size: 13px; } .comboOption:hover, .comboOption.highlighted { background: var(--surf-6); } .comboOption.comboEmpty { color: var(--mut); cursor: default; } .comboOption.comboEmpty:hover { background: transparent; } .comboClear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--mut); cursor: pointer; font-size: 15px; padding: 4px; line-height: 1; } .comboClear:hover { color: var(--txt); } .listFilters { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin: 15px 0; } .listFilters .field { margin: 0; min-width: 220px; } .listFilters .field.grow { flex: 1; min-width: 240px; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; } .list { display: grid; gap: 10px; } .item { display: flex; gap: 18px; justify-content: space-between; align-items: center; border: 1px solid var(--line); background: var(--surf-1); border-radius: 14px; padding: 16px; min-height: 72px; } .itemMain { min-width: 0; line-height: 1.35; } .itemMain strong { display: block; margin-bottom: 3px; } .itemMain span { display: block; color: var(--mut); font-size: 12px; } .itemActions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; min-width: max-content; padding-left: 18px; } .itemActions .btn { width: auto; } .tag { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; font-size: 12px; font-weight: 900; background: var(--surf-4); line-height: 1; } .tag i { flex: 0 0 auto; } .tag.ok { color: var(--c-ok-text); } .tag.warn { color: var(--c-warn-text); } .tag.info { color: var(--c-info-text); } .tag.bad { color: var(--c-bad-text); } .tablewrap { overflow: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--surf-1); max-height: 65vh; } .table { border-collapse: separate; border-spacing: 0; min-width: 1100px; width: 100%; } .table th, .table td { border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); text-align: center; padding: 8px; font-size: 12px; } /* sticky no thead (não nos th individuais): o browser trata o thead como uma única unidade de empilhamento, eliminando a competição entre os th e os td com !important (weekend/holiday) que causava o header ser coberto durante a rolagem vertical. */ .table thead { position: sticky; top: 0; z-index: 10; } .table th { background: var(--surf-3); color: var(--txt-soft); } .table th:first-child, .table td:first-child { position: sticky; left: 0; text-align: left; background: var(--surf-5); z-index: 2; min-width: 220px; } .table th:nth-child(2), .table td:nth-child(2) { position: sticky; left: 220px; text-align: left; background: var(--surf-5); z-index: 2; min-width: 145px; } /* Cruzamento top+left: th das colunas fixas herdам o z-index do thead mas precisam ser explícitos para o sticky left funcionar acima dos td do tbody durante rolagem horizontal. */ .table thead th { z-index: 11; } .table thead th:first-child, .table thead th:nth-child(2) { z-index: 12; background: var(--surf-3); } .weekend { background: rgba(251, 113, 133, 0.15) !important; color: var(--c-bad-text); } .cell { border-radius: 9px; padding: 5px 4px; cursor: pointer; font-weight: 950; } .confirmed { background: rgba(34, 197, 94, 0.2); color: var(--c-ok-text); } .temporary { background: rgba(250, 204, 21, 0.23); color: var(--c-warn-text); } .vacation { background: rgba(var(--accent-rgb), 0.22); color: var(--txt-softer); } .comp { background: rgba(111, 99, 255, 0.24); color: #c4b5fd; } .over { outline: 2px solid var(--bad); } .legend { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 14px; } .modal { position: fixed; inset: 0; background: var(--overlay); display: grid; place-items: center; padding: 16px; z-index: 20; overflow: hidden; } .modalcard { width: min(900px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; background: var(--surf-2); border: 1px solid var(--line); border-radius: 22px; padding: 20px; box-shadow: var(--shadow); scrollbar-width: thin; } .modalcard::-webkit-scrollbar { width: 10px; } .modalcard::-webkit-scrollbar-thumb { background: var(--line); border-radius: 20px; } .modalhead { display: flex; justify-content: space-between; align-items: center; } .iconButton { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--mut); cursor: pointer; font-size: 18px; line-height: 1; flex: 0 0 auto; } .iconButton:hover { background: var(--surf-6); color: var(--txt-strong); } .modalFoot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(var(--accent-rgb), 0.18); } .confirmDialogOverlay { /* Precisa ficar acima do .globalLoading (z-index: 999): funções como deleteAlloc/clearAlloc/deleteComment/deleteVacation chamam este diálogo DEPOIS que o loading automático (withLoading) já está ativo na tela, então sem isto o card de loading cobriria visualmente os botões Confirmar/Cancelar. */ z-index: 1000; } .confirmCard { width: min(420px, calc(100vw - 32px)); text-align: center; padding: 28px 24px 22px; } .confirmIcon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 14px; font-size: 24px; background: rgba(251, 113, 133, 0.12); color: var(--bad); } .confirmIcon.info { background: rgba(var(--accent-rgb), 0.12); color: var(--blue); } .confirmTitle { font-size: 17px; margin: 0 0 8px; } .confirmMessage { color: var(--mut); font-size: 13.5px; line-height: 1.5; margin: 0; } .confirmActions { display: flex; justify-content: center; gap: 10px; margin-top: 22px; } .confirmActions .btn { min-width: 120px; } .formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; } .toast { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); min-width: min(520px, calc(100vw - 28px)); text-align: center; background: var(--surf-3); border: 1px solid var(--line); border-radius: 14px; padding: 13px 16px; box-shadow: var(--shadow); z-index: 80; font-weight: 850; } .toast.success { background: rgba(22, 101, 52, 0.96); border-color: #22c55e; color: #ecfdf5; } .toast.error { background: rgba(127, 29, 29, 0.96); border-color: #ef4444; color: #fff1f2; } .toast.warning { background: rgba(120, 90, 5, 0.96); border-color: var(--warn); color: #fffbeb; } .statusdot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; background: var(--bad); } .statusdot.on { background: var(--ok); } .commentsBadge { display: inline-flex; align-items: center; gap: 3px; margin-left: 5px; padding: 2px 5px; border-radius: 999px; background: var(--surf-4); border: 1px solid var(--line); color: var(--c-info-text); font-size: 10px; vertical-align: middle; cursor: pointer; } .commentsBadge:hover { border-color: var(--cyan); color: var(--c-displacement-text); } .drawer { position: fixed; inset: 0; z-index: 25; pointer-events: none; } .drawerShade { position: absolute; inset: 0; background: var(--overlay-soft); opacity: 0; transition: 0.2s; } .drawerPanel { position: absolute; right: 0; top: 0; height: 100dvh; width: min(460px, 100vw); background: var(--surf-2); border-left: 1px solid var(--line); box-shadow: var(--shadow); transform: translateX(100%); transition: 0.22s; display: flex; flex-direction: column; pointer-events: auto; } .drawer:not(.hidden) .drawerShade { opacity: 1; pointer-events: auto; } .drawer:not(.hidden) .drawerPanel { transform: translateX(0); } .drawerHead { padding: 18px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .drawerBody { padding: 16px; overflow: auto; display: grid; gap: 10px; } .commentCard { border: 1px solid var(--line); background: var(--surf-1); border-radius: 14px; padding: 12px; } .commentMeta { font-size: 12px; color: var(--mut); margin-bottom: 7px; } .commentText { white-space: pre-wrap; line-height: 1.45; } .commentActions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .commentEditArea { width: 100%; min-height: 96px; margin-top: 8px; } .commentEdited { font-size: 11px; color: var(--mut); margin-top: 6px; } .drawerForm { padding: 14px; border-top: 1px solid var(--line); background: var(--bg2); } .drawerForm textarea { min-height: 90px; } .globalLoading { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; background: var(--overlay-soft); backdrop-filter: blur(3px); } .globalLoadingCard { display: flex; align-items: center; gap: 12px; min-width: 240px; max-width: min(420px, calc(100vw - 32px)); border: 1px solid rgba(var(--accent-rgb), 0.28); border-radius: 18px; background: linear-gradient( 145deg, rgba(var(--panel-rgb-2), 0.98), rgba(var(--panel-rgb), 0.94) ); box-shadow: var(--shadow); padding: 16px 18px; color: var(--txt); font-weight: 950; } .globalLoadingSpinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(148, 163, 184, 0.28); border-top-color: var(--cyan); animation: spin 0.75s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } body.is-busy button, body.is-busy input, body.is-busy select, body.is-busy textarea { pointer-events: none; } body.is-busy .globalLoading { pointer-events: auto; } /* O diálogo de confirmação (ex.: "Excluir este lançamento?") pode ser aberto por funções que já estão envolvidas pelo loading global automático (installActionLoaders/withLoading) — nesses casos o overlay de loading some à frente do diálogo de confirmação e, sem esta regra, bloquearia o clique em "Confirmar"/"Cancelar" via pointer-events: none, travando a ação para sempre aguardando uma resposta que o usuário não consegue dar. O confirmDialog deve continuar clicável mesmo com a tela "ocupada". */ body.is-busy #confirmDialog, body.is-busy #confirmDialog button { pointer-events: auto; } .password-wrapper { position: relative; width: 100%; } .password-wrapper .input { padding-right: 52px; } .password-toggle { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--mut); cursor: pointer; font-size: 18px; padding: 4px; } .password-toggle:hover { color: var(--txt-strong); } .nav button i { width: 22px; display: inline-block; margin-right: 10px; font-size: 1rem; vertical-align: middle; color: var(--c-info-text); } .nav button.active i, .nav button:hover i { color: var(--txt-strong); } .password-toggle i { font-size: 18px; } /* Calendário avançado: workload por consultor */ .calendarSummary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0 14px; } .calSummaryCard { border: 1px solid rgba(var(--accent-rgb), 0.22); background: linear-gradient( 145deg, rgba(var(--panel-rgb-2), 0.96), rgba(var(--panel-rgb), 0.86) ); border-radius: 16px; padding: 13px 14px; box-shadow: 0 10px 26px var(--shadow-soft); } .calSummaryCard small { display: block; color: var(--mut); font-weight: 850; margin-bottom: 5px; } .calSummaryCard b { font-size: 20px; letter-spacing: -0.03em; } .calendarLegend .tag { gap: 7px; } .calendarLegend .tag i { font-size: 13px; } .tablewrap { border-radius: 20px; box-shadow: inset 0 1px 0 var(--shine), 0 18px 38px var(--shadow-soft); } .table.calendarTable { border-spacing: 0; min-width: 1260px; } .calendarTable th { background: linear-gradient(180deg, var(--surf-3), var(--surf-2)); font-size: 12px; } /* transition com 'background' nos td cria stacking context próprio em cada célula, fazendo-os renderizar acima do thead sticky no Chrome. Mantemos só border-color para não perder o feedback visual de hover. */ .calendarTable td { transition: border-color 0.18s ease; position: relative; padding: 0; /* Centraliza o chip com alocação no meio da célula */ display: table-cell; vertical-align: middle; text-align: center; } /* Células SEM alocação: chip ocupa toda a área do td para maximizar a área clicável — o GP pode clicar em qualquer ponto da célula. */ .calendarTable td .allocChip.empty { position: absolute; inset: 0; width: 100%; height: 100%; min-width: unset; min-height: unset; border-radius: 0; border: none; box-shadow: none; } /* Células COM alocação: chip mantém visual original (tamanho fixo, bordas arredondadas). Restaura explicitamente o que o .empty override anula, garantindo que não herde nada indesejado. */ .calendarTable td .allocChip:not(.empty) { position: relative; inset: unset; width: unset; height: unset; display: inline-flex; } .calendarTable .todayCol { background: rgba(var(--accent-rgb), 0.11) !important; box-shadow: inset 2px 0 rgba(var(--accent-rgb), 0.42), inset -2px 0 rgba(var(--accent-rgb), 0.16); } .calendarTable .todayHead { background: linear-gradient( 180deg, #1b408f, var(--surf-2) ) !important; color: #fff; } /* .calendarTable .weekend seleciona th E td — o !important sobrescreve o background do thead. Os seletores th.weekend / th.holiday abaixo restauram o background sólido correto para o header. */ .calendarTable .weekend { background: repeating-linear-gradient( 135deg, rgba(251, 113, 133, 0.1) 0 9px, rgba(251, 113, 133, 0.15) 9px 18px ) !important; } .calendarTable th.weekend { background: linear-gradient(180deg, #2a1020, #1a0d1a) !important; color: #fda4af; } .calendarTable .holiday { background: linear-gradient( 135deg, rgba(250, 204, 21, 0.24), rgba(202, 138, 4, 0.13) ) !important; color: var(--c-holiday-text); } .calendarTable th.holiday { background: linear-gradient( 180deg, #835f13, #563519 ) !important; color: #fff7cc; } .calendarTable .holiday.weekend { background: repeating-linear-gradient( 135deg, rgba(250, 204, 21, 0.2) 0 9px, rgba(202, 138, 4, 0.14) 9px 18px ) !important; } .calendarTable th.holiday.weekend { background: linear-gradient(180deg, #835f13, #563519) !important; color: #fff7cc; } /* As classes .weekend e .holiday usam !important no background, o que vence o background sólido das colunas sticky (td:first-child / td:nth-child(2)). Quando o usuário rola horizontalmente, essas colunas ficam "transparentes" e o conteúdo das datas aparece por baixo. A solução é forçar o background sólido correto com seletores de especificidade maior E !important nas colunas fixas do tbody. */ .calendarTable tbody td:first-child, .calendarTable tbody td:nth-child(2) { background: var(--surf-5) !important; } /* consultantGroupRow tem gradiente próprio — preserva nas colunas fixas */ .calendarTable tbody .consultantGroupRow td:first-child { background: linear-gradient( 105deg, rgba(79, 56, 210, 0.55) 0%, rgba(34, 211, 238, 0.18) 38%, rgba(var(--panel-rgb-2), 0.96) 72% ) !important; border-left: 3px solid rgba(111, 99, 255, 0.75); } .calendarTable tbody .consultantGroupRow td:nth-child(2) { background: linear-gradient( 90deg, rgba(var(--capacity-col-rgb), 0.98) 0%, rgba(var(--panel-rgb-2), 0.96) 100% ) !important; } .holidayMark { display: inline-flex; align-items: center; justify-content: center; margin-left: 3px; color: var(--c-holiday-text); font-size: 10px; vertical-align: middle; } .tag.holidayTag { color: var(--c-holiday-text); border-color: rgba(250, 204, 21, 0.32); background: rgba(250, 204, 21, 0.1); } .tag.leadershipTag { color: var(--c-leadership-text); border-color: rgba(168, 85, 247, 0.38); background: rgba(168, 85, 247, 0.12); } .tag.travelTag { color: var(--c-travel-text); border-color: rgba(251, 146, 60, 0.38); background: rgba(251, 146, 60, 0.12); } .tag.displacementTag { color: var(--c-displacement-text); border-color: rgba(34, 211, 238, 0.38); background: rgba(34, 211, 238, 0.12); } .consultantGroupRow td { border-top: 2px solid rgba(var(--accent-rgb), 0.36); border-bottom: 1px solid rgba(148, 163, 184, 0.22); padding: 14px 10px !important; } .consultantGroupCell { display: flex; align-items: center; gap: 12px; } .consultantAvatar { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient( 135deg, rgba(111, 99, 255, 0.95), rgba(34, 211, 238, 0.55) ); color: #fff; font-weight: 1000; box-shadow: 0 8px 22px var(--shadow-strong); } .consultantMeta b { display: block; font-size: 14px; } .consultantMeta small { display: block; color: var(--mut); font-size: 11px; margin-top: 2px; } .capacityBox { min-width: 170px; } .capacityTop { display: flex; justify-content: space-between; gap: 8px; align-items: center; color: var(--txt-soft); font-weight: 950; font-size: 12px; } .capacityTrack { height: 7px; margin-top: 7px; border-radius: 999px; background: var(--surf-1); overflow: hidden; border: 1px solid rgba(148, 163, 184, 0.14); } .capacityFill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #22c55e, #60a5fa); } .capacityFill.warn { background: linear-gradient(90deg, #facc15, #fb923c); } .capacityFill.danger { background: linear-gradient(90deg, #fb7185, #ef4444); } .projectCell { position: relative; display: flex; align-items: center; gap: 10px; min-width: 230px; } .projectStripe { width: 5px; height: 36px; border-radius: 999px; flex: 0 0 auto; box-shadow: 0 0 0 1px var(--shine-strong); } .projectText strong { display: block; font-size: 12px; line-height: 1.25; } .projectText small { display: flex; align-items: center; gap: 6px; color: var(--mut); font-size: 11px; margin-top: 4px; } .projectModeMini { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 999px; background: rgba(var(--accent-rgb), 0.12); border: 1px solid rgba(var(--accent-rgb), 0.22); color: var(--txt-softer); font-size: 10px; font-weight: 900; } .allocChip { min-width: 42px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; border-radius: 12px; font-weight: 1000; border: 1px solid var(--shine-strong); box-shadow: 0 8px 18px var(--shadow-soft); position: relative; overflow: hidden; cursor: pointer; } .allocChip.presential { border-left: 4px solid #a855f7; box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.28), 0 0 14px rgba(168, 85, 247, 0.22), 0 8px 18px var(--shadow-soft); } .allocChip.presential::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 0% 50%, rgba(168, 85, 247, 0.26), transparent 42%); pointer-events: none; } .allocChip.presential .hoursLabel, .allocChip.presential .miniMeta, .allocChip.remote .hoursLabel, .allocChip.remote .miniMeta, .allocChip.presential .commentsBadge, .allocChip.remote .commentsBadge { position: relative; z-index: 1; } .allocChip .hoursLabel { font-size: 13px; line-height: 1; } .allocChip .miniMeta { font-size: 10px; line-height: 1; color: rgba(255, 255, 255, 0.82); } .allocChip.empty { opacity: 0.45; background: transparent; border-color: transparent; box-shadow: none; } .allocChip.empty:hover { opacity: 1; background: rgba(var(--accent-rgb), 0.08); border-color: rgba(var(--accent-rgb), 0.25); } .allocChip.confirmed { background: linear-gradient( 135deg, rgba(22, 101, 52, 0.88), rgba(16, 185, 129, 0.28) ); color: #d1fae5; } .allocChip.temporary { background: linear-gradient( 135deg, rgba(133, 77, 14, 0.9), rgba(250, 204, 21, 0.22) ); color: #fef3c7; } .allocChip.vacation { background: linear-gradient( 135deg, rgba(30, 64, 175, 0.9), rgba(var(--accent-rgb), 0.28) ); color: var(--txt-soft); } .allocChip.comp { background: linear-gradient( 135deg, rgba(91, 33, 182, 0.9), rgba(167, 139, 250, 0.28) ); color: #ede9fe; } .allocChip.travel { background: linear-gradient( 135deg, rgba(154, 52, 18, 0.9), rgba(251, 146, 60, 0.3) ); color: #ffedd5; } .allocChip.displacement { background: linear-gradient( 135deg, rgba(14, 116, 144, 0.9), rgba(34, 211, 238, 0.3) ); color: #cffafe; } .chipMenu { position: absolute; z-index: 1200; display: flex; flex-direction: column; min-width: 160px; padding: 6px; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); animation: chipMenuIn 0.12s ease-out; } .chipMenu button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: none; border-radius: 8px; background: transparent; color: var(--txt); font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; } .chipMenu button:hover { background: var(--card2); } .chipMenu button i { color: var(--mut); } @keyframes chipMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .allocChip.over { outline: 2px solid rgba(251, 113, 133, 0.9); box-shadow: 0 0 0 4px rgba(251, 113, 133, 0.14), 0 8px 18px var(--shadow-soft); } /* Realce de liderança: alocação criada/editada por admin ou root */ .allocChip.leadership { outline: 2px solid rgba(168, 85, 247, 0.85); box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.18), 0 0 14px rgba(168, 85, 247, 0.28), 0 8px 18px var(--shadow-soft); } .allocChip.leadership::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgba(168, 85, 247, 0.22), transparent 58%); pointer-events: none; border-radius: inherit; } /* Badge de autoria no modal */ .authorBadge { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgba(168, 85, 247, 0.13); border: 1px solid rgba(168, 85, 247, 0.35); color: var(--c-leadership-text); } .authorBadge.regular { background: rgba(var(--accent-rgb), 0.10); border-color: rgba(var(--accent-rgb), 0.28); color: var(--c-info-text); } .authorBadge i { font-size: 11px; } .commentsBadge { background: rgba(var(--accent-rgb), 0.15); border-color: rgba(var(--accent-rgb), 0.28); color: var(--txt-soft); } .commentsBadge i { font-size: 10px; } .projectRow:hover td { background: rgba(var(--accent-rgb), 0.05); } .projectRow:hover .projectText strong { color: var(--txt-soft); } .consultantDayVacation { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 8px; border-radius: 12px; background: linear-gradient( 135deg, rgba(30, 64, 175, 0.9), rgba(var(--accent-rgb), 0.26) ); color: var(--txt-soft); font-size: 11px; font-weight: 950; border: 1px solid rgba(147, 197, 253, 0.2); } .consultantDayTotal { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 46px; padding: 6px 8px; border-radius: 12px; background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(var(--accent-rgb), 0.14)); color: var(--txt-soft); font-size: 11px; font-weight: 1000; border: 1px solid rgba(var(--accent-rgb), 0.28); box-shadow: inset 0 1px 0 var(--shine); } .consultantDayTotal.presential { color: #f3e8ff; background: linear-gradient(135deg, rgba(126, 34, 206, 0.72), rgba(168, 85, 247, 0.22)); border-color: rgba(192, 132, 252, 0.6); box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.12), inset 0 1px 0 var(--shine); } .consultantDayTotal.presential i { color: #e9d5ff; } .consultantDayTotal.empty { opacity: .42; background: rgba(var(--panel-rgb-2), 0.56); color: #94a3b8; } .consultantDayTotal.over { color: #ffe4e6; background: linear-gradient(135deg, rgba(225, 29, 72, 0.82), rgba(251, 113, 133, 0.26)); border-color: rgba(251, 113, 133, 0.82); box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.16), 0 8px 18px var(--shadow-soft); } .allocationModeMini { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 999px; background: rgba(var(--accent-rgb), 0.12); border: 1px solid rgba(var(--accent-rgb), 0.24); color: var(--txt-softer); font-size: 10px; font-weight: 950; } @media (max-width: 560px) { .connectionRow { align-items: flex-start; } .configMenuWrap { width: 100%; } .configLink { width: 100%; text-align: center; } .pbConfigPanel { left: 0; right: auto; width: 100%; } .pbConfigPanel::before { left: 26px; right: auto; } } /* Ajustes de densidade visual e modal de alocação */ body { font-size: 14px; } .field { margin: 9px 0; } .input, .select, textarea { padding: 10px 11px; border-radius: 12px; } textarea { min-height: 76px; } .btn { padding: 9px 13px; border-radius: 12px; } .modal { padding: 12px; } .modalcard { width: min(820px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); padding: 16px; border-radius: 18px; } .modalhead h3 { margin: 0; font-size: 18px; } .formgrid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; } .allocLayout { display: grid; gap: 14px; } .allocPanel { border: 1px solid var(--line); background: var(--surf-1); border-radius: 16px; padding: 14px; } .allocPanelTitle { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 10px; } .allocPanelTitle h4 { margin: 0; font-size: 15px; } .allocPanelTitle small { color: var(--mut); } .requiredMark { color: var(--bad); font-weight: 900; } .allocRows { display: grid; gap: 8px; } .allocRow { display: grid; grid-template-columns: 88px 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--surf-7); background: var(--surf-1); border-radius: 14px; padding: 10px; } .allocHoursEdit { display: flex; align-items: center; gap: 6px; } .allocHoursEdit input { width: 64px; text-align: center; padding: 8px; } .allocEditGrid { display: grid; grid-template-columns: 78px 74px 74px; gap: 6px; align-items: center; } .allocEditGrid .input, .allocEditGrid .select { padding: 7px 8px; font-size: 11px; } .allocNote { color: var(--txt-softer); font-size: 12px; line-height: 1.35; margin-top: 3px; white-space: pre-wrap; } .allocScheduleMini { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; color: var(--txt-softer); font-size: 10px; font-weight: 950; line-height: 1; } .allocDetailList { display: grid; gap: 10px; } .allocDetailCard { border: 1px solid var(--line); background: var(--surf-1); border-radius: 14px; padding: 12px; } .allocDetailCard h4 { margin: 0 0 8px; font-size: 14px; } .allocDetailMeta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .viewerNotice { border: 1px solid rgba(var(--accent-rgb), 0.28); background: rgba(var(--accent-rgb), 0.08); color: var(--txt-soft); border-radius: 14px; padding: 12px; font-size: 12px; line-height: 1.45; } .allocRowActions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; } @media (max-width: 760px) { .formgrid.compact { grid-template-columns: 1fr; } .allocRow { grid-template-columns: 1fr; align-items: stretch; } .allocRowActions { justify-content: flex-start; } .allocHoursEdit input { width: 100%; } } @media (max-width: 900px) { .calendarToolbar { grid-template-columns: 1fr; } .login { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; } .loginbox { grid-template-columns: 1fr; height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; } .hero { min-height: auto; border-right: none; border-bottom: 1px solid var(--shine); } .heroLede { margin-bottom: 20px; } .heroFeature span { display: none; } .loginActions .btn, .configLink { width: 100%; text-align: center; } .item { align-items: flex-start; flex-direction: column; } .itemActions { justify-content: flex-start; padding-left: 0; min-width: 0; } .drawerPanel { width: 100vw; } .drawerHead { padding: 14px; } .drawerBody { padding: 12px; } .loginbox, .app, .split, .cards { grid-template-columns: 1fr; } .side { position: relative; height: auto; } .sidebarToggle { display: none; } .userbox { position: static; margin-top: 18px; } .main { padding: 15px; } .top { display: block; } .formgrid { grid-template-columns: 1fr; } .toolbar .field { min-width: 100%; } .btn { width: 100%; } .table th:first-child, .table td:first-child, .table th:nth-child(2), .table td:nth-child(2) { position: static; min-width: auto; } .modal { padding: 8px; place-items: start center; } .modalcard { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 18px; padding: 14px; } .modalhead { position: sticky; top: -14px; background: var(--surf-2); z-index: 10; padding: 8px 0; border-bottom: 1px solid var(--line); } } .vacationList { display: grid; gap: 10px; margin-top: 10px; } .vacationCard { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; background: linear-gradient( 135deg, rgba(59, 130, 246, 0.14), rgba(34, 211, 238, 0.06) ); border: 1px solid rgba(var(--accent-rgb), 0.38); border-left: 5px solid #60a5fa; border-radius: 16px; padding: 14px 16px; box-shadow: 0 10px 26px var(--shadow-soft); } .vacationCard:hover { background: linear-gradient( 135deg, rgba(59, 130, 246, 0.2), rgba(34, 211, 238, 0.09) ); border-color: rgba(147, 197, 253, 0.62); } .vacationKicker { display: inline-flex; align-items: center; gap: 6px; color: var(--txt-softer); font-size: 12px; font-weight: 950; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 5px; } .vacationDate { color: var(--txt-strong); font-size: 16px; font-weight: 950; line-height: 1.25; } .vacationDays { display: inline-flex; margin-left: 8px; padding: 4px 8px; border-radius: 999px; background: rgba(147, 197, 253, 0.14); border: 1px solid rgba(147, 197, 253, 0.25); color: var(--txt-soft); font-size: 12px; font-weight: 900; vertical-align: middle; } .vacationNote { color: var(--mut); font-size: 13px; line-height: 1.4; margin-top: 6px; white-space: pre-wrap; } .pagination { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); } .pageBtn { border: 1px solid var(--line); background: var(--surf-1); color: var(--txt); border-radius: 10px; padding: 7px 12px; font-size: 12px; font-weight: 900; cursor: pointer; min-width: 36px; text-align: center; } .pageBtn:hover:not(:disabled) { background: var(--surf-4); border-color: var(--pri); } .pageBtn.active { color: #fff; background: linear-gradient(135deg, var(--pri), var(--pri2)); border-color: transparent; } .pageBtn:disabled { opacity: 0.4; cursor: not-allowed; } .pageEllipsis { color: var(--mut); padding: 0 4px; font-size: 12px; font-weight: 900; } .consultantTabs { display: grid; gap: 14px; } .tabBar { display: inline-flex; gap: 8px; padding: 5px; background: var(--surf-1); border: 1px solid var(--line); border-radius: 14px; width: fit-content; max-width: 100%; flex-wrap: wrap; } .tabBtn { border: 0; color: var(--mut); background: transparent; border-radius: 10px; padding: 9px 12px; font-weight: 950; cursor: pointer; } .tabBtn.active { color: #fff; background: linear-gradient( 135deg, rgba(111, 99, 255, 0.85), rgba(34, 211, 238, 0.28) ); box-shadow: inset 0 0 0 1px var(--shine-strong); } .tabPanel { border: 1px solid var(--line); background: rgba(var(--panel-rgb), 0.72); border-radius: 18px; padding: 16px; } .tabPanelHeader { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .tabPanelHeader h4 { margin: 0 0 4px; font-size: 16px; } .tabPanelHeader p { margin: 0; color: var(--mut); font-size: 12px; line-height: 1.45; } .vacationPanel { background: linear-gradient( 135deg, rgba(37, 99, 235, 0.09), rgba(34, 211, 238, 0.04) ); border-color: rgba(var(--accent-rgb), 0.28); } .vacationEmpty { border: 1px dashed rgba(var(--accent-rgb), 0.35); color: var(--mut); background: rgba(59, 130, 246, 0.06); padding: 16px; border-radius: 14px; } .vacationFormBox { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(var(--accent-rgb), 0.22); } @media (max-width: 760px) { .tabBar { width: 100%; } .tabBtn { flex: 1; } .tabPanelHeader { flex-direction: column; } } @media (max-width: 760px) { .vacationCard { grid-template-columns: 1fr; } .vacationCard .btn { width: 100%; } } /* ========================================================= Ajuste visual compacto - equivalente aproximado ao zoom 80% Mantém o layout responsivo, mas reduz espaçamentos, fontes, cards, filtros, menu lateral e células do calendário. ========================================================= */ @media (min-width: 901px) { :root { --radius: 14px; } body { font-size: 12px; } .app { grid-template-columns: 230px 1fr; } .app.sidebar-collapsed { grid-template-columns: 0px 1fr; } .sidebarToggle { left: 218px; } .app.sidebar-collapsed .sidebarToggle { left: 12px; } .side { padding: 16px 14px; } .logo { gap: 9px; margin-bottom: 20px; } .brandImage, .mark { width: 40px; height: 40px; border-radius: 12px; padding: 6px; } .brandImageSidebar { height: 32px; padding: 6px 10px; } .brandLogo b { font-size: 13px; } .logo span { font-size: 11px; } .nav button { margin: 4px 0; padding: 10px 11px; border-radius: 12px; font-size: 12px; } .nav button i { width: 18px; margin-right: 8px; font-size: 0.9rem; } .userbox { left: 14px; right: 14px; bottom: 14px; padding: 12px; border-radius: 14px; font-size: 12px; } .main { padding: 19px 20px; } .top { margin-bottom: 14px; gap: 12px; } .top h1 { font-size: 24px; line-height: 1.15; } .top p { margin: 8px 0 0; font-size: 13px; } .toolbar { gap: 8px; margin: 12px 0; align-items: end; } .toolbar .field { min-width: 150px; } .field { margin: 7px 0; } .field label { font-size: 11px; margin-bottom: 5px; } .input, .select, textarea { padding: 8px 10px; border-radius: 10px; font-size: 12px; min-height: 36px; } .input[type="date"] { padding-right: 36px; background-position: right 10px center; background-size: 17px; } .btn { padding: 8px 12px; border-radius: 11px; font-size: 12px; } .btn.small { padding: 6px 8px; border-radius: 9px; font-size: 11px; } .cards { grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 10px; margin-bottom: 14px; } .card { padding: 13px 14px; border-radius: 14px; } .metric { font-size: 24px; margin-top: 4px; } .metricHint { font-size: 11px; margin-top: 4px; } .calendarSummary { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 12px 0; } .calSummaryCard { padding: 11px 12px; border-radius: 14px; } .calSummaryCard small { font-size: 11px; margin-bottom: 4px; } .calSummaryCard b { font-size: 18px; } .legend { gap: 6px; margin: 8px 0 12px; } .tag { padding: 5px 9px; font-size: 11px; } .tablewrap { border-radius: 14px; max-height: 70vh; } .table, .table.calendarTable { min-width: 1120px; } .table th, .table td { padding: 6px; font-size: 11px; } .calendarTable th { font-size: 11px; } .table th:first-child, .table td:first-child { min-width: 180px; width: 180px; } .table th:nth-child(2), .table td:nth-child(2) { left: 180px; min-width: 128px; width: 128px; } .consultantGroupRow td { padding: 10px 8px !important; } .consultantGroupCell { gap: 9px; } .consultantAvatar { width: 30px; height: 30px; border-radius: 10px; font-size: 12px; } .consultantMeta b { font-size: 12px; } .consultantMeta small { font-size: 10px; } .capacityBox { min-width: 130px; } .capacityTop { font-size: 11px; } .capacityTrack { height: 6px; margin-top: 6px; } .projectCell { min-width: 185px; gap: 8px; } .projectStripe { width: 4px; height: 31px; } .projectText strong { font-size: 11px; line-height: 1.2; } .projectText small { font-size: 10px; gap: 4px; margin-top: 3px; } .projectModeMini { padding: 2px 6px; font-size: 9px; } .allocChip { min-width: 36px; min-height: 33px; border-radius: 10px; gap: 2px; } .allocChip .hoursLabel { font-size: 11px; } .allocChip .miniMeta { font-size: 9px; } .consultantDayVacation { padding: 5px 7px; border-radius: 10px; font-size: 10px; gap: 4px; } .commentsBadge { margin-left: 3px; padding: 1px 4px; font-size: 9px; } .modalcard { width: min(760px, calc(100vw - 28px)); padding: 14px; border-radius: 16px; } .formgrid.compact, .formgrid { gap: 8px 10px; } .allocPanel, .tabPanel, .item, .commentCard { padding: 12px; border-radius: 14px; } .dashboardFilters { margin: 12px 0 16px; padding: 13px; border-radius: 14px; } } /* Correções: rolagem em tela cheia e colunas fixas opacas no hover */ .calendarTable { table-layout: auto; } .calendarTable th:first-child, .calendarTable td:first-child, .calendarTable th:nth-child(2), .calendarTable td:nth-child(2) { background: var(--surf-5) !important; background-clip: padding-box; } .calendarTable thead th:first-child, .calendarTable thead th:nth-child(2) { background: var(--surf-3) !important; } .projectRow:hover td:first-child, .projectRow:hover td:nth-child(2) { background: var(--surf-5) !important; } .projectRow:hover td:not(:first-child):not(:nth-child(2)) { background-color: rgba(var(--accent-rgb), 0.05); } body.calendar-fullscreen-mode #calendar .tablewrap { overflow-x: auto !important; overflow-y: auto !important; scrollbar-gutter: stable; overscroll-behavior: contain; } body.calendar-fullscreen-mode #calendar .table, body.calendar-fullscreen-mode #calendar .table.calendarTable { width: max-content !important; min-width: 100% !important; } body.calendar-fullscreen-mode #calendar .calendarTable th:not(:first-child):not(:nth-child(2)), body.calendar-fullscreen-mode #calendar .calendarTable td:not(:first-child):not(:nth-child(2)) { min-width: 64px; } body.calendar-fullscreen-mode #calendar .calendarTable th:first-child, body.calendar-fullscreen-mode #calendar .calendarTable td:first-child { min-width: 220px; width: 220px; } body.calendar-fullscreen-mode #calendar .calendarTable th:nth-child(2), body.calendar-fullscreen-mode #calendar .calendarTable td:nth-child(2) { min-width: 150px; width: 150px; } /* Modo tela cheia exclusivo do calendário */ .calendarFullscreenTop { display: none; } .calendarFullscreenBtn { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } body.calendar-fullscreen-mode { overflow: hidden; } body.calendar-fullscreen-mode #calendar { position: fixed; inset: 0; z-index: 900; display: flex !important; flex-direction: column; gap: 10px; padding: 12px; background: radial-gradient( circle at 0 0, var(--hero-radial-bg) 0, rgba(var(--panel-rgb), 0.98) 42% ), var(--bg); } body.calendar-fullscreen-mode #calendar > .toolbar, body.calendar-fullscreen-mode #calendar > #calendarSummary, body.calendar-fullscreen-mode #calendar > .calendarLegend { display: none !important; } body.calendar-fullscreen-mode #calendar .calendarFullscreenTop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 42px; padding: 8px 10px; border: 1px solid rgba(var(--accent-rgb), 0.22); border-radius: 14px; background: rgba(var(--panel-rgb), 0.88); box-shadow: 0 14px 34px var(--shadow-strong); } body.calendar-fullscreen-mode #calendar .calendarFullscreenTop b { display: block; font-size: 14px; letter-spacing: -0.01em; } body.calendar-fullscreen-mode #calendar .calendarFullscreenTop span { display: block; margin-top: 2px; color: var(--mut); font-size: 11px; } body.calendar-fullscreen-mode #calendar .tablewrap { flex: 1 1 auto; max-height: none; height: calc(100vh - 76px); width: 100%; max-width: 100vw; overflow: auto; scrollbar-gutter: stable both-edges; border-radius: 14px; } body.calendar-fullscreen-mode #calendar .table, body.calendar-fullscreen-mode #calendar .table.calendarTable { width: max-content !important; min-width: 100% !important; } body.calendar-fullscreen-mode #calendar .table th, body.calendar-fullscreen-mode #calendar .table td { padding: 6px; font-size: 11px; } body.calendar-fullscreen-mode #calendar .allocChip { min-width: 35px; min-height: 32px; } body.calendar-fullscreen-mode #calendar .allocChip .hoursLabel { font-size: 11px; } body.calendar-fullscreen-mode #calendar .allocChip .miniMeta { font-size: 9px; } /* Ajuste solicitado: modal de alocações 20% mais compacto e lista existente legível */ #modal .modalcard { width: min(780px, calc(100vw - 28px)); padding: 14px; font-size: 12px; } #modal .modalhead { align-items: center; gap: 28px; padding: 0 0 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(var(--accent-rgb), 0.18); } #modal .modalhead h3 { font-size: 16px; line-height: 1.2; letter-spacing: -0.02em; } #modal .modalhead .btn { flex: 0 0 auto; } #modal .field { margin: 7px 0; } #modal .field label { font-size: 10.5px; margin-bottom: 5px; } #modal .input, #modal .select, #modal textarea { padding: 8px 10px; border-radius: 10px; font-size: 12px; min-height: 34px; } #modal textarea { min-height: 58px; } #modal .btn { padding: 8px 11px; border-radius: 10px; font-size: 12px; } #modal .btn.small { padding: 7px 9px; font-size: 11px; } #modal .formgrid.compact { gap: 8px 10px; } #modal .allocLayout { gap: 12px; } #modal .allocPanel { padding: 12px; border-radius: 14px; } #modal .allocPanelTitle { gap: 12px; margin-bottom: 10px; align-items: center; } #modal .allocPanelTitle h4 { font-size: 14px; line-height: 1.15; } #modal .allocPanelTitle small { font-size: 11px; } #modal .allocRows { gap: 10px; } #modal .allocRow { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 12px; border-radius: 14px; background: linear-gradient( 135deg, rgba(var(--capacity-col-rgb), 0.98), rgba(var(--panel-rgb), 0.96) ); border-color: rgba(var(--accent-rgb), 0.22); } #modal .allocHoursEdit { gap: 7px; } #modal .allocHoursEdit input { width: 62px; min-height: 32px; text-align: center; } #modal .allocEditGrid { grid-template-columns: minmax(94px, 1fr) 70px 70px; gap: 7px; width: 100%; margin-top: 8px !important; } #modal .allocEditGrid .input, #modal .allocEditGrid .select { padding: 7px 8px; font-size: 11px; min-height: 32px; } #modal .allocRow strong { display: block; font-size: 12px; line-height: 1.25; margin-bottom: 4px; } #modal .allocScheduleMini { display: inline-flex; width: fit-content; margin: 2px 0 6px; padding: 4px 7px; border-radius: 999px; background: rgba(var(--accent-rgb), 0.12); border: 1px solid rgba(var(--accent-rgb), 0.2); font-size: 10.5px; line-height: 1; } #modal .allocNote { margin-top: 4px; color: var(--txt-softer); font-size: 11.5px; line-height: 1.35; max-width: 100%; overflow-wrap: anywhere; } #modal .allocRowActions { min-width: 118px; display: grid; grid-template-columns: 1fr; gap: 8px; justify-content: stretch; } #modal .allocRowActions .btn { width: 100%; white-space: nowrap; } @media (max-width: 860px) { #modal .modalcard { width: calc(100vw - 18px); padding: 12px; } #modal .allocRow { grid-template-columns: 1fr; gap: 10px; } #modal .allocRowActions { min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); } #modal .allocEditGrid { grid-template-columns: 1fr 1fr 1fr; } } /* Ajuste final: modal mais largo, responsivo e horários sem corte */ #modal .modalcard { width: min(980px, calc(100vw - 32px)); max-width: 980px; } #modal .modalhead { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 2px 2px 16px; margin-bottom: 16px; } #modal .modalhead h3 { margin: 0; flex: 1 1 auto; } #modal .modalhead .btn { flex: 0 0 auto; min-width: 76px; } #modal .allocRow { grid-template-columns: minmax(330px, 380px) minmax(260px, 1fr) minmax( 120px, 140px ); gap: 16px; align-items: center; } #modal .allocEditGrid { display: grid; grid-template-columns: minmax(128px, 1fr) minmax(88px, 96px) minmax( 88px, 96px ); gap: 9px; align-items: center; } #modal .allocEditGrid input[type="time"] { min-width: 88px; width: 100%; padding-left: 9px; padding-right: 6px; text-align: left; font-variant-numeric: tabular-nums; } #modal .allocEditGrid select { min-width: 128px; } #modal .allocHoursEdit input { min-width: 72px; } #modal .allocRowActions { min-width: 120px; } #modal .allocScheduleMini { white-space: normal; line-height: 1.2; } @media (max-width: 980px) { #modal .modalcard { width: calc(100vw - 18px); max-width: none; } #modal .allocRow { grid-template-columns: minmax(300px, 360px) minmax(220px, 1fr) minmax( 112px, 128px ); gap: 12px; } #modal .allocEditGrid { grid-template-columns: minmax(120px, 1fr) minmax(88px, 94px) minmax( 88px, 94px ); } } @media (max-width: 760px) { #modal .allocRow { grid-template-columns: 1fr; align-items: stretch; } #modal .allocEditGrid { grid-template-columns: 1fr 1fr; } #modal .allocEditGrid select { grid-column: 1 / -1; } #modal .allocEditGrid input[type="time"] { min-width: 0; } #modal .allocRowActions { min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { #modal .modalhead { gap: 12px; } #modal .modalhead .btn { min-width: 64px; } #modal .allocEditGrid { grid-template-columns: 1fr; } } /* ===================================================================== Importação de planilha do Monday — tela "Importar Monday". Fluxo em 3 passos dentro da mesma
: upload -> revisão -> preview de calendário + confirmação. Reaproveita variáveis de superfície/cor já definidas em :root (--surf-*, --c-*-text, --ok, --warn, --bad) para não introduzir paleta nova. ===================================================================== */ .importSteps { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; } .importStep { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--surf-2); border: 1px solid var(--line-soft); color: var(--mut); font-size: 13px; font-weight: 600; } .importStep.active { background: rgba(var(--accent-rgb), 0.16); border-color: var(--blue); color: var(--txt-strong); } .importStep.done { color: var(--c-ok-text); border-color: var(--ok); } .importStep b { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surf-3); font-size: 11px; } .importDropzone { border: 2px dashed var(--line); border-radius: var(--radius); background: var(--surf-1); padding: 48px 24px; text-align: center; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .importDropzone:hover, .importDropzone.dragOver { border-color: var(--blue); background: var(--surf-3); } .importDropzone i { font-size: 38px; color: var(--mut); display: block; margin-bottom: 12px; } .importDropzone b { color: var(--txt-strong); } .importDropzone small { display: block; margin-top: 6px; color: var(--mut); } .importSummaryCards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 18px 0; } .importTable { width: 100%; border-collapse: collapse; background: var(--surf-1); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; font-size: 13px; } .importTable th { background: var(--surf-3); text-align: left; padding: 10px 12px; font-size: 12px; color: var(--mut); font-weight: 700; border-bottom: 1px solid var(--line-soft); white-space: nowrap; } .importTable td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; } .importTable tr:last-child td { border-bottom: none; } .importTable select, .importTable .input { width: 100%; min-width: 150px; } .importTaskName { font-weight: 600; color: var(--txt-strong); } .importTaskMeta { color: var(--mut); font-size: 12px; margin-top: 2px; } .importRow.hasConflict { background: rgba(251, 113, 133, 0.08); } .importRow.hasOverflow td:first-child { box-shadow: inset 3px 0 0 var(--warn); } .importRow.hasConflict td:first-child { box-shadow: inset 3px 0 0 var(--bad); } .importBadge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; } .importBadge.ok { background: rgba(34, 197, 94, 0.14); color: var(--c-ok-text); } .importBadge.warn { background: rgba(250, 204, 21, 0.16); color: var(--c-warn-text); } .importBadge.bad { background: rgba(251, 113, 133, 0.16); color: var(--c-bad-text); } .importCalWrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surf-1); } .importCalTable { border-collapse: collapse; width: 100%; font-size: 12px; } .importCalTable th, .importCalTable td { border: 1px solid var(--line-soft); padding: 6px 8px; text-align: center; white-space: nowrap; } .importCalTable th { background: var(--surf-3); color: var(--mut); position: sticky; top: 0; } .importCalTable td:first-child, .importCalTable th:first-child { text-align: left; position: sticky; left: 0; background: var(--surf-5); z-index: 1; min-width: 160px; } .importCell { border-radius: 6px; padding: 3px 4px; font-weight: 700; font-size: 11px; } .importCell.ok { background: rgba(34, 197, 94, 0.18); color: var(--c-ok-text); } .importCell.conflict { background: rgba(251, 113, 133, 0.22); color: var(--c-bad-text); } .importCell.weekendCell { background: var(--surf-3); color: var(--mut); } .importLegend { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0; font-size: 12px; color: var(--mut); } .importLegend span { display: inline-flex; align-items: center; gap: 6px; } .importLegend i.dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; } .importActionsBar { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; gap: 12px; flex-wrap: wrap; } .importOverflowList { list-style: none; margin: 8px 0 0; padding: 0; font-size: 12px; color: var(--c-warn-text); } .importOverflowList li { padding: 4px 0; } /* Sub-grade de distribuição manual de horas por dia */ .importDayGrid { display: none; } .importDayGrid.open { display: table-row; } /* Wrapper com borda azul à esquerda + fundo distinto + separadores visuais claros para não se confundir com as linhas de tarefa */ .importDayGridInner { padding: 0; border-left: 4px solid var(--blue); background: var(--surf-3); box-shadow: inset 0 2px 0 rgba(var(--accent-rgb), 0.18), inset 0 -2px 0 rgba(var(--accent-rgb), 0.1); } .importDayGridBanner { background: rgba(var(--accent-rgb), 0.1); border-bottom: 1px solid rgba(var(--accent-rgb), 0.2); padding: 10px 18px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .importDayGridBanner h5 { margin: 0; font-size: 13px; font-weight: 700; color: var(--blue); display: flex; align-items: center; gap: 7px; } .importDayGridHeader { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; } .importDayGridHeader h5 { margin: 0; font-size: 13px; color: var(--txt-strong); } .importDayTotals { font-size: 12px; color: var(--mut); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .importDayTotals b { color: var(--txt-strong); } .importDayTotals .underflow { color: var(--c-warn-text); font-weight: 700; } .importDayGridBody { padding: 14px 18px 16px; } .importDayRows { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 8px; } .importDayRow { background: var(--surf-1); border: 1px solid var(--line-soft); border-radius: 10px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; } .importDayRow.vacation { opacity: 0.45; border-style: dashed; pointer-events: none; } .importDayRow.weekend { background: var(--surf-3); border-style: dashed; } .importDayLabel { flex: 1; font-size: 12px; } .importDayLabel b { display: block; color: var(--txt-strong); } .importDayLabel small { color: var(--mut); } .importDayInput { width: 56px; text-align: center; padding: 4px 6px; font-size: 13px; font-weight: 700; background: var(--surf-5); border: 1px solid var(--blue); border-radius: 8px; color: var(--txt-strong); } .importDayInput:focus { outline: 2px solid var(--blue); outline-offset: 1px; } .importDayInput:disabled { opacity: 0.4; cursor: not-allowed; border-color: var(--line); } .importDayAddRow { display: flex; gap: 8px; margin-top: 14px; align-items: center; flex-wrap: wrap; padding-top: 12px; border-top: 1px dashed var(--line-soft); } .importExpandBtn { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--surf-3); border: 1px solid var(--line-soft); color: var(--mut); cursor: pointer; white-space: nowrap; transition: background 0.12s; } .importExpandBtn:hover { background: var(--surf-5); color: var(--txt-strong); } .importExpandBtn.active { background: rgba(var(--accent-rgb), 0.18); border-color: var(--blue); color: var(--blue); font-weight: 600; } /* Linha de tarefa com a sub-grade aberta fica levemente destacada */ .importRow.expanded { background: rgba(var(--accent-rgb), 0.06); box-shadow: inset 4px 0 0 var(--blue); } .importConflictPanel { background: rgba(251, 113, 133, 0.08); border: 1px solid var(--bad); border-radius: var(--radius); padding: 16px 18px; margin: 8px 0 18px; } .importConflictPanel h4 { margin: 0 0 10px; color: var(--c-bad-text); font-size: 14px; display: flex; align-items: center; gap: 8px; } .importConflictList { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; } .importConflictItem { background: var(--surf-1); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; } .importConflictItem b { color: var(--txt-strong); display: block; margin-bottom: 2px; } .importConflictItem .importConflictReason { color: var(--c-bad-text); font-weight: 600; } .importConflictItem .importConflictDetail { color: var(--mut); margin-top: 2px; } /* Histórico de lotes de importação */ .importBatchList { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } .importBatchItem { background: var(--surf-1); border: 1px solid var(--line-soft); border-radius: 12px; padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; } .importBatchItem.reverted { opacity: 0.55; border-style: dashed; } .importBatchMeta { font-size: 13px; } .importBatchMeta b { color: var(--txt-strong); display: block; margin-bottom: 3px; } .importBatchMeta small { color: var(--mut); } .importBatchTags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } /* ── Contexto de vertical no sidebar (substitui a barra do header) ── */ .verticalContext { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 10px; border-radius: 999px; background: rgba(var(--accent-rgb), 0.14); border: 1px solid rgba(var(--accent-rgb), 0.3); color: var(--blue); font-size: 11px; font-weight: 700; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; transition: background 0.15s; } .verticalContext.clickable { cursor: pointer; } .verticalContext.clickable:hover { background: rgba(var(--accent-rgb), 0.24); } .verticalContext #verticalContextLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Picker de troca de vertical (mini modal no sidebar) ── */ .verticalPicker { position: fixed; bottom: 180px; left: 12px; width: 220px; background: var(--surf-2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 32px var(--shadow-soft); z-index: 50; padding: 8px 0; } .verticalPickerHeader { font-size: 11px; font-weight: 700; color: var(--mut); padding: 6px 14px 4px; text-transform: uppercase; letter-spacing: 0.06em; } .verticalPickerItem { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 13px; cursor: pointer; color: var(--txt); transition: background 0.1s; } .verticalPickerItem:hover { background: var(--surf-3); } .verticalPickerItem.active { color: var(--blue); font-weight: 700; } .verticalPickerItem.active::after { content: "✓"; margin-left: auto; font-size: 12px; } /* ── Tela de Verticais ── */ .verticalCard { background: var(--surf-1); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .verticalCard:hover { border-color: var(--line); } .verticalCardInfo b { display: block; font-size: 15px; color: var(--txt-strong); } .verticalCardInfo small { color: var(--mut); font-size: 12px; } .verticalCardActions { display: flex; gap: 8px; flex-shrink: 0; } /* ── Dropdown de perfil no topo direito ── */ .userDropdownWrap { position: relative; } .userDropdownTrigger { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--surf-2); border: 1px solid var(--line-soft); cursor: pointer; color: var(--txt-strong); font-size: 12px; font-weight: 600; transition: background 0.15s; white-space: nowrap; } .userDropdownTrigger:hover { background: var(--surf-3); } .userDropdownAvatar { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), #6366f1); color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .userDropdownName { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .userDropdownMenu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 260px; background: var(--surf-1); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 40px var(--shadow-soft); z-index: 200; overflow: hidden; animation: dropdownIn 0.15s ease; } @keyframes dropdownIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .userDropdownHeader { display: flex; align-items: center; gap: 12px; padding: 16px; } .userDropdownAvatarLg { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), #6366f1); color: #fff; font-size: 17px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .userDropdownHeader b { display: block; color: var(--txt-strong); font-size: 14px; } .userDropdownRole { color: var(--mut); font-size: 12px; margin-top: 2px; display: block; } .userDropdownDivider { height: 1px; background: var(--line-soft); margin: 0; } .userDropdownSectionLabel { padding: 10px 16px 4px; font-size: 11px; font-weight: 700; color: var(--mut); text-transform: uppercase; letter-spacing: 0.06em; } .userDropdownVerticalItem { display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-size: 13px; cursor: pointer; color: var(--txt); transition: background 0.1s; } .userDropdownVerticalItem:hover { background: var(--surf-3); } .userDropdownVerticalItem.active { color: var(--blue); font-weight: 700; } .userDropdownVerticalItem.active .vCheck { visibility: visible; } .vCheck { margin-left: auto; font-size: 13px; color: var(--blue); visibility: hidden; } .userDropdownAction { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 13px; font-weight: 600; cursor: pointer; background: none; border: none; color: var(--txt); width: 100%; text-align: left; transition: background 0.1s; } .userDropdownAction:hover { background: var(--surf-3); } .userDropdownAction.danger { color: var(--c-bad-text); }