/* ============================================================ PAINEL DE PEDIDOS — Studybay Design tokens + base components (CSS puro, sem framework) Compatível com Flask + Jinja2 + JS vanilla. Use: ... ============================================================ */ :root, [data-theme="slate"] { /* superfícies */ --bg:#0e1217; --panel:#171d25; --card:#202a35; --line:#2b3946; /* texto */ --text:#e8eef4; --muted:#8a98a6; /* acentos */ --accent:#4c8dff; --overdue:#ef4444; /* atrasado */ --today:#f59e0b; /* hoje */ --claude:#ff8a3d; /* entregável + agendamento do Claude */ /* status do pedido */ --st-afazer:#8a98a6; --st-fazendo:#4c8dff; --st-revisao:#a974ff; --st-pronto:#34d399; --st-entregue:#14b8a6; } [data-theme="carbon"] { --bg:#14110d; --panel:#1f1b15; --card:#2a241b; --line:#3a3124; --text:#f4eee2; --muted:#a89a83; --accent:#5a9cff; --overdue:#f0594b; --today:#f5a623; --claude:#ff8a3d; --st-afazer:#a89a83; --st-fazendo:#5a9cff; --st-revisao:#b98cff; --st-pronto:#3ddba0; --st-entregue:#1dc2ab; } [data-theme="midnight"] { --bg:#070a13; --panel:#101526; --card:#172033; --line:#243049; --text:#eaf0fb; --muted:#8693ad; --accent:#5b8cff; --overdue:#ff5d5d; --today:#ffb02e; --claude:#ff9a4d; --st-afazer:#8693ad; --st-fazendo:#5b8cff; --st-revisao:#b58cff; --st-pronto:#3ee0a3; --st-entregue:#1ec9b3; } /* ---- tipografia ---- */ :root { --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; } [data-font="geist"] { --font:'Geist',sans-serif; } [data-font="plex"] { --font:'IBM Plex Sans',sans-serif; } /* ---- escala / raios / sombras (referência) ---- */ :root { --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --radius-sm:7px; --radius-md:9px; --radius-lg:11px; --radius-xl:14px; --shadow-card:0 6px 16px rgba(0,0,0,.35); --shadow-overlay:0 24px 60px rgba(0,0,0,.5); --text-xs:11px; --text-sm:12px; --text-md:13.5px; --text-lg:15px; --text-xl:19px; --text-2xl:24px; } * { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--text); font-family:var(--font); font-size:var(--text-md); -webkit-font-smoothing:antialiased; } ::placeholder { color:var(--muted); opacity:.8; } /* ============================================================ COMPONENTES ============================================================ */ /* superfícies */ .panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-xl); } .card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:14px; } /* card de pedido — cor da borda esquerda por status */ .order-card { position:relative; border-left:3px solid var(--st-afazer); } .order-card[data-status="afazer"] { border-left-color:var(--st-afazer); } .order-card[data-status="fazendo"] { border-left-color:var(--st-fazendo); } .order-card[data-status="revisao"] { border-left-color:var(--st-revisao); } .order-card[data-status="pronto"] { border-left-color:var(--st-pronto); } .order-card[data-status="entregue"] { border-left-color:var(--st-entregue); } /* pills / badges */ .pill { display:inline-flex; align-items:center; gap:4px; border-radius:var(--radius-sm); padding:3px 9px; font-size:var(--text-xs); font-weight:700; } .pill-type { background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent); } .pill-alert { background:var(--overdue); color:#fff; font-weight:800; animation:alert-pulse 1.15s ease-in-out infinite; } .pill-admin { background:color-mix(in srgb,var(--accent) 18%,transparent); color:var(--accent); border-radius:999px; } /* botões */ .btn { border:none; border-radius:var(--radius-md); padding:9px 15px; font-weight:700; font-size:13px; cursor:pointer; font-family:inherit; } .btn-primary { background:var(--accent); color:#fff; } .btn-primary:hover { filter:brightness(1.07); } .btn-ghost { background:transparent; border:1px solid var(--line); color:var(--text); font-weight:600; } .btn-ghost:hover { border-color:var(--muted); } .btn-danger { background:transparent; border:1px solid var(--overdue); color:var(--overdue); font-weight:600; } .btn-claude { background:var(--claude); color:#231202; font-weight:800; } /* campos */ .input, .select, .textarea { width:100%; background:var(--bg); border:1px solid var(--line); color:var(--text); border-radius:var(--radius-md); padding:9px 11px; font-size:13px; font-family:inherit; outline:none; } .input:focus, .select:focus, .textarea:focus { border-color:var(--accent); } .textarea { resize:vertical; line-height:1.45; } .select { appearance:none; -webkit-appearance:none; cursor:pointer; } /* avatar */ .avatar { border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; } .avatar-sm { width:24px; height:24px; font-size:10px; } .avatar-lg { width:36px; height:36px; font-size:13px; } /* chips de resumo */ .chip { display:flex; align-items:center; gap:9px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:9px 13px; } .chip .dot { width:9px; height:9px; border-radius:50%; } /* faixa Claude — entregável */ .claude-band { background:color-mix(in srgb,var(--claude) 9%,var(--bg)); border:1px solid color-mix(in srgb,var(--claude) 32%,transparent); border-radius:var(--radius-lg); padding:10px 11px; } .claude-band .label { color:var(--claude); font-weight:700; } /* badge de agendamento */ .claude-sched { display:flex; align-items:center; gap:8px; background:color-mix(in srgb,var(--claude) 12%,transparent); border:1px solid color-mix(in srgb,var(--claude) 35%,transparent); border-radius:var(--radius-md); padding:8px 10px; animation:claude-glow 2s ease-in-out infinite; } /* flash / toast */ .flash { display:flex; align-items:center; gap:9px; background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--radius-lg); padding:11px 16px; font-weight:600; box-shadow:var(--shadow-overlay); } /* drop zones (planner Semana) */ .dropzone { border:1px dashed var(--line); border-radius:var(--radius-lg); } .dropzone.is-over { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); } /* indicador de autosave */ .saving { font-size:var(--text-xs); color:var(--muted); } /* ---- animações ---- */ @keyframes alert-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(239,68,68,0); } 50% { box-shadow:0 0 0 4px rgba(239,68,68,.30); } } @keyframes claude-glow { 0%,100% { box-shadow:0 0 0 0 rgba(255,138,61,0); } 50% { box-shadow:0 0 0 3px rgba(255,138,61,.22); } }