/* ════════════════════════════════════════════════════════════════════ Jobdash — Redesign editorial layer (V1) Overrides de styles.css e Tailwind para aplicar o design Almanac sem tocar markup. Tokens vivem em tokens.css (carregar antes). Rollback: remover de tokens.css e redesign.css no index.html. ════════════════════════════════════════════════════════════════════ */ /* ─── base ─────────────────────────────────────────────────────────── */ html, body { background: var(--paper-2) !important; color: var(--ink); font-family: var(--serif); font-feature-settings: "ss01","onum","liga"; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* Tailwind .bg-slate-50 used on — restyle via attribute */ body.bg-slate-50 { background: var(--paper-2) !important; } body.text-slate-900 { color: var(--ink); } .bg-white { background: var(--paper) !important; } .bg-slate-100 { background: var(--paper-3) !important; } .text-slate-500, .text-slate-600 { color: var(--mute) !important; } .text-slate-700 { color: var(--ink-2) !important; } .text-slate-900 { color: var(--ink) !important; } .border-slate-200, .border-slate-300 { border-color: var(--hair) !important; } /* ─── typography ───────────────────────────────────────────────────── */ h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; margin: 0; color: var(--ink); } h1 { font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 400; } h2 { font-size: 22px; line-height: 1.15; font-weight: 500; } h3 { font-size: 18px; line-height: 1.25; font-weight: 500; } h4 { font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mute); } p { font-family: var(--serif); line-height: 1.55; color: var(--ink-2); } /* ─── header (app-header) ──────────────────────────────────────────── */ .app-header { background: var(--paper) !important; border-bottom: 1px solid var(--ink) !important; font-family: var(--serif); } .app-header h1 { font-family: var(--serif); font-weight: 400; font-size: 22px; letter-spacing: -0.02em; } .app-header h1 span:nth-child(2) { /* "Jobdash" wordmark — terracota dot replicated via ::after */ position: relative; } .app-header h1 span:nth-child(2)::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: 4px; vertical-align: super; transform: translateY(-4px); } /* count "147/420" badge — monospace tabular */ .app-header span.text-slate-500, .app-header span.text-xs { font-family: var(--mono); font-feature-settings: "tnum"; font-size: 11px; color: var(--mute); letter-spacing: 0.02em; } /* view switcher buttons (state.view tabs) */ .app-header button { font-family: var(--mono) !important; font-size: 10.5px !important; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500 !important; } .app-header button.bg-white { background: var(--paper) !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--hair) !important; } /* search input */ .app-header input[type="text"], .app-header input[x-model*="search"] { font-family: var(--serif); font-size: 14px; background: var(--paper); border: 1px solid var(--hair) !important; border-radius: 0 !important; padding: 6px 10px; } .app-header input[type="text"]:focus { outline: none; border-color: var(--ink) !important; box-shadow: none !important; } /* checkbox label "Só ativas / Tudo" */ .app-header label { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mute); } /* ─── tables (main pipeline) ───────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; background: var(--paper); } thead th, table th { text-align: left; font-weight: 500; color: var(--mute); text-transform: uppercase; font-size: 9.5px; letter-spacing: 0.1em; border-bottom: 1px solid var(--ink); padding: 7px 10px; background: var(--paper-2); font-family: var(--mono); } tbody td, table td { padding: 8px 10px; border-bottom: 1px solid var(--hair-2); font-feature-settings: "tnum"; color: var(--ink); vertical-align: middle; font-family: var(--mono); } tbody tr:hover { background: var(--paper-3); } /* Sticky header — abordagem "wrapper scroll container dinâmico": - height usa variáveis CSS medidas por measureStickyHeights() em app.js (--header-height, --toolbar-height), calculadas após Alpine renderizar. - height (não max-height) garante scrollbar sempre ativo com 1200+ linhas. - overflow-x: auto do styles.css já cria o scroll container; overflow-y: auto aqui o complementa. thead th { top: 0 } é relativo ao topo visível do wrapper. - Sem hardcode: funciona em qualquer resolução/zoom. */ .opp-table-wrapper { height: calc(100vh - var(--header-height, 48px) - var(--toolbar-height, 52px) - 20px); overflow-y: auto; overflow-x: auto; } .opp-table-wrapper thead th { position: sticky; top: 0; z-index: 20; background: var(--paper-2); border-bottom: 2px solid var(--ink); box-shadow: 0 1px 0 var(--hair); } /* Tier badges (A/B/C/D) — keep colorful but on monospace */ .tier-A, .badge-A { color: var(--accent); font-weight: 700; } .tier-B, .badge-B { color: var(--warn); font-weight: 600; } .tier-C, .badge-C { color: var(--mute); font-weight: 500; } /* Urgency markers */ .urgent, .urg, [data-urgent="true"], .text-red-600, .text-red-700, .bg-red-50, .bg-red-100 { color: var(--accent) !important; } .bg-red-50, .bg-red-100, .bg-amber-50 { background: var(--accent-soft) !important; } /* Pills / chips */ .rounded-full, .rounded-md { border-radius: 2px !important; } .bg-emerald-100, .text-emerald-700 { color: var(--good) !important; background: transparent !important; } .bg-amber-100, .text-amber-700 { color: var(--warn) !important; background: transparent !important; } /* ─── kanban cards (Visão Kanban) ───────────────────────────────────── */ [class*="kan"], .kanban-card, .kanban-col { background: var(--paper-2); border: 1px solid var(--hair); border-radius: 0; } .kanban-card { padding: 10px; margin: 8px 0; cursor: grab; } .kanban-card .title, .kanban-card h4 { font-family: var(--serif); font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--ink); text-transform: none; letter-spacing: 0; } /* ─── buttons (action / print / pdf) ───────────────────────────────── */ button, .btn { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; } button.primary, .btn-primary { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: 0; padding: 8px 16px; } button.primary:hover { background: var(--ink-2); } /* ─── cards / panels ──────────────────────────────────────────────── */ .card, .panel, .shadow, .shadow-sm, .rounded-lg, .rounded-xl { background: var(--paper); border: 1px solid var(--hair); border-radius: 0 !important; box-shadow: none !important; } /* ─── monospace numerals everywhere (deadlines, counts, IDs) ──────── */ .num, .id, .deadline, .count, [class*="numeric"], time, code { font-family: var(--mono); font-feature-settings: "tnum"; } /* ─── horizontal rules (editorial hairlines) ───────────────────────── */ hr { border: 0; border-top: 1px solid var(--hair); margin: 16px 0; } /* ─── focus ring (accessible, editorial) ─────────────────────────── */ :focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; } /* ─── calendar / leaflet / external libs — soften ─────────────────── */ .fc, .leaflet-container { font-family: var(--serif); } .fc-button, .fc-toolbar-title { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px; } /* ─── mobile: maintain density, reduce padding ───────────────────── */ @media (max-width: 768px) { body { padding: 0 !important; } table { font-size: 11px; } table th, table td { padding: 6px 8px; } h1 { font-size: 22px; } } /* ════════════════════════════════════════════════════════════════════ v5 — Kanban / Archive / Drive / Calendar / Toolbar / Modais / Hoje ════════════════════════════════════════════════════════════════════ */ /* ─── Kanban (enhanced) ─────────────────────────────────────────── */ .kanban-col { background: var(--paper-2); border: none; border-radius: 0; padding: 4px 0; } .kanban-card { background: var(--paper-2) !important; border: 1px solid var(--hair) !important; border-radius: 0 !important; border-left: 3px solid var(--hair) !important; box-shadow: 0 1px 3px oklch(0 0 0 / 0.06) !important; padding: 10px 12px !important; transition: box-shadow 0.15s, background 0.1s; } .kanban-card:hover { background: var(--paper) !important; box-shadow: 0 2px 6px oklch(0 0 0 / 0.1) !important; } /* Tier-colored left border via Alpine :style overrides */ /* Tier A = terracota, Tier B = warn, rest = hair */ .kanban-card[data-tier="A"] { border-left-color: var(--accent) !important; } .kanban-card[data-tier="B"] { border-left-color: var(--warn) !important; } .kanban-card[data-tier="C"] { border-left-color: var(--mute-2) !important; } .kanban-card[data-tier="D"] { border-left-color: var(--hair) !important; } /* Name uses serif, data uses mono */ .kanban-card .font-medium, .kanban-card .text-xs:first-child { font-family: var(--serif) !important; font-size: 13px !important; } .kanban-card .text-\[10px\] { font-family: var(--mono) !important; } /* Kanban column headers */ .kanban-col ~ h3, .grid > div > h3 { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; color: var(--mute); border-bottom: 1px solid var(--hair); padding-bottom: 6px; margin-bottom: 6px; } /* ─── Archive table (opacidade reduzida — vagas mortas) ─────────── */ section[x-show*="archive"] table, .archive-table { opacity: 0.82; } section[x-show*="archive"] tbody tr:nth-child(even), .archive-table tbody tr:nth-child(even) { background: var(--paper-3) !important; } section[x-show*="archive"] tbody tr:nth-child(odd), .archive-table tbody tr:nth-child(odd) { background: var(--paper) !important; } section[x-show*="archive"] tbody tr:hover, .archive-table tbody tr:hover { background: oklch(0.91 0.008 270 / 0.4) !important; opacity: 1; } section[x-show*="archive"] a { color: var(--mute) !important; text-decoration: none; } section[x-show*="archive"] a:hover { color: var(--ink) !important; } /* ─── Drive view ────────────────────────────────────────────────── */ section[x-show*="drive"] .font-mono, section[x-show*="drive"] td .text-\[10px\] { font-family: var(--mono) !important; font-size: 11px; color: var(--mute); } section[x-show*="drive"] .text-\[11px\] { font-family: var(--mono) !important; } /* File type icon colors by extension */ section[x-show*="drive"] td:first-child { /* icon cell */ font-size: 16px; } /* Drive folder group separator */ section[x-show*="drive"] .border-l-4 { border-left-width: 3px !important; padding-left: 12px !important; margin-bottom: 20px; } section[x-show*="drive"] .border-l-4 .font-bold.text-sm { font-family: var(--serif); font-size: 14px; color: var(--ink); } /* Drive filter bar */ section[x-show*="drive"] .bg-slate-50 { background: var(--paper-3) !important; border: 1px solid var(--hair) !important; border-radius: 0 !important; } /* ─── Calendar view ─────────────────────────────────────────────── */ .fc .fc-daygrid-day { background: var(--paper); } .fc .fc-daygrid-day:hover { background: var(--paper-3); } .fc .fc-daygrid-day.fc-day-today { background: var(--accent-soft) !important; } .fc .fc-daygrid-day-number { font-family: var(--mono); font-size: 11px; color: var(--mute); font-feature-settings: "tnum"; } .fc .fc-event { border-radius: 0 !important; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.03em; } /* Calendar tier legend badges */ .cal-tier-badge { display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 700; padding: 1px 6px; border: 1px solid var(--hair); border-radius: 0; letter-spacing: 0.06em; text-transform: uppercase; } .cal-tier-badge--A { color: var(--accent); border-color: var(--accent); } .cal-tier-badge--B { color: var(--warn); border-color: var(--warn); } .cal-tier-badge--C { color: var(--mute); border-color: var(--hair); } /* ─── Filters / Toolbar ─────────────────────────────────────────── */ .opp-toolbar { background: var(--paper-2) !important; border: 1px solid var(--hair) !important; border-radius: 0 !important; font-family: var(--mono); } .opp-toolbar input[type="text"], .opp-toolbar input[type="search"], .opp-toolbar select { background: var(--paper); border: 1px solid var(--ink) !important; border-radius: 0 !important; font-family: var(--mono); font-size: 11px; padding: 4px 8px; } .opp-toolbar label { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mute); font-weight: 600; } /* Filter bar (header) inputs */ .app-header select, .app-header .relative select { font-family: var(--mono); font-size: 11px; border: 1px solid var(--hair); border-radius: 0; background: var(--paper); padding: 3px 6px; } .app-header span.font-semibold { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mute); } /* ─── Modais ────────────────────────────────────────────────────── */ /* Overlay papel envelhecido */ .fixed.inset-0.bg-black\/50 { background: oklch(from var(--paper) l c h / 0.92) !important; backdrop-filter: blur(1px); } /* Modal container */ .fixed.inset-0 > div.bg-white { background: var(--paper) !important; border: 1px solid var(--ink) !important; border-radius: 0 !important; box-shadow: 4px 4px 0 oklch(0 0 0 / 0.12) !important; } /* Modal title */ .fixed.inset-0 > div h2 { font-family: var(--serif); font-weight: 400; border-bottom: 1px solid var(--ink); padding-bottom: 10px; margin-bottom: 12px; } /* Modal inputs */ .fixed.inset-0 input, .fixed.inset-0 select, .fixed.inset-0 textarea { background: var(--paper-2) !important; border: 1px solid var(--hair) !important; border-radius: 0 !important; font-family: var(--serif); font-size: 13px; color: var(--ink); padding: 6px 8px; } .fixed.inset-0 input:focus, .fixed.inset-0 select:focus, .fixed.inset-0 textarea:focus { border-color: var(--ink) !important; outline: none !important; box-shadow: none !important; } .fixed.inset-0 label { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mute); font-weight: 600; } /* ─── View "Hoje" ────────────────────────────────────────────────── */ .hoje-bloco { background: var(--paper); border: 1px solid var(--hair); padding: 20px 24px; margin-bottom: 24px; } .hoje-bloco-title { font-family: var(--mono) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; color: var(--mute) !important; border-bottom: 2px solid var(--ink); padding-bottom: 4px; margin-bottom: 0 !important; } .hoje-bloco-header { border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 16px !important; } .hoje-bloco-title { border-bottom: none !important; padding-bottom: 0 !important; } .hoje-bloco-sub { color: var(--mute-2); font-family: var(--mono); } /* Card AGORA */ .hoje-card { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--hair); background: var(--paper-2); border-left: 4px solid var(--hair); transition: background 0.1s; } .hoje-card:hover { background: var(--paper); } .hoje-card--tier-A { border-left-color: var(--accent) !important; } .hoje-card--tier-B { border-left-color: var(--warn) !important; } .hoje-card--tier-C { border-left-color: var(--mute-2) !important; } .hoje-card--tier-D { border-left-color: var(--hair) !important; } .hoje-card-tier { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--mute); width: 16px; flex-shrink: 0; padding-top: 2px; } .hoje-card--tier-A .hoje-card-tier { color: var(--accent); } .hoje-card--tier-B .hoje-card-tier { color: var(--warn); } .hoje-card-body { flex: 1; min-width: 0; } .hoje-card-name { font-family: var(--serif); font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.2; margin-bottom: 2px; } .hoje-card-inst { font-family: var(--mono); font-size: 10.5px; color: var(--mute); margin-bottom: 4px; } .hoje-countdown { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; padding: 2px 6px; border: 1px solid; } .hoje-countdown--hoje { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } .hoje-countdown--amanha { color: var(--warn); border-color: var(--warn); background: oklch(0.96 0.04 75); } .hoje-horas { color: var(--mute); } .hoje-link { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mute); text-decoration: none; border: 1px solid var(--hair); padding: 1px 6px; cursor: pointer; background: none; } .hoje-link:hover { color: var(--ink); border-color: var(--ink); background: var(--paper-2); } .hoje-overflow { color: var(--mute); padding: 6px 0; border-top: 1px dashed var(--hair); margin-top: 4px; } .hoje-horas-total { color: var(--mute); border-top: 1px solid var(--hair-2); padding-top: 8px; margin-top: 4px; } .hoje-empty { text-align: center; padding: 24px 0; color: var(--mute-2); font-family: var(--serif); } /* Progress bar semanal */ .hoje-progress-wrap { max-width: 480px; } .hoje-progress-bar-bg { height: 6px; background: var(--paper-3); border: 1px solid var(--hair); border-radius: 0; overflow: hidden; } .hoje-progress-bar-fill { height: 100%; background: var(--good); transition: width 0.4s; border-radius: 0; } .hoje-progress-bar-fill--over { background: var(--accent); } /* Grupo por dia da semana */ .hoje-dia-grupo { border: 1px solid var(--hair-2); border-radius: 0; padding: 10px 14px; background: var(--paper); } .hoje-dia-grupo--ativo { border-color: var(--hair); background: var(--paper-2); } .hoje-dia-header { margin-bottom: 6px; } .hoje-dia-label { font-family: var(--mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-2); } .hoje-dia-iso { color: var(--mute-2); } .hoje-dia-n { color: var(--mute); } .hoje-dia-vazio { font-family: var(--mono); font-size: 11px; color: var(--mute-2); padding: 2px 0; font-style: italic; } .hoje-dia-item { padding: 4px 0; border-top: 1px solid var(--hair-2); font-family: var(--serif); } .hoje-dia-tier-badge { font-family: var(--mono); font-size: 9.5px; font-weight: 700; width: 16px; text-align: center; flex-shrink: 0; } .hoje-dia-tier-badge--A { color: var(--accent); } .hoje-dia-tier-badge--B { color: var(--warn); } .hoje-dia-tier-badge--C { color: var(--mute); } .hoje-dia-tier-badge--D { color: var(--mute-2); } /* ════════════════════════════════════════════════════════════════════ Mobile responsiveness — gallery (cards) view ════════════════════════════════════════════════════════════════════ */ /* Gallery card base */ .opp-card { min-width: 0; word-break: break-word; } /* Action buttons in cards — larger tap targets on touch */ .opp-card .mt-3 button, .opp-card .mt-3 a { min-height: 32px; display: inline-flex; align-items: center; } @media (max-width: 640px) { /* ── Gallery grid: single column, full-width cards ── */ .gallery-grid { grid-template-columns: 1fr !important; gap: 10px !important; } .opp-card { width: 100% !important; margin: 0 0 0 0 !important; padding: 12px !important; } /* Larger tap targets for action buttons */ .opp-card .mt-3 button, .opp-card .mt-3 a { font-size: 13px !important; min-height: 36px; padding: 4px 8px; } /* Prevent text overflow on card titles */ .opp-card h3 { font-size: 13px !important; line-height: 1.35 !important; } /* Filter bar: wrap and scroll on mobile */ .app-header .overflow-x-auto { -webkit-overflow-scrolling: touch; } /* Kanban: stack columns vertically on very small screens */ .kanban-col { min-width: 100% !important; } }