/* Ported verbatim from the design file (Scalex GTM Engine.dc.html). Do not restyle:
   every value here is the designer's. Additions live in the clearly marked block at the
   bottom, which only covers things a static mockup never had to express (login screen,
   native control theming, toasts). */

[data-theme="dark"] { --bg:#121212; --s1:#181818; --s2:#1d1d1d; --s3:#232830; --line:rgba(255,255,255,0.10); --line2:rgba(255,255,255,0.06); --tx:#f8f8f8; --tx2:#dadada; --tx3:#929292; --chip:rgba(255,255,255,0.05); --hi:rgba(24,71,201,0.16); --hi2:rgba(24,71,201,0.28); }
[data-theme="light"] { --bg:#f4f4f5; --s1:#ffffff; --s2:#fafafa; --s3:#eef0f3; --line:rgba(18,18,18,0.12); --line2:rgba(18,18,18,0.06); --tx:#121212; --tx2:#383838; --tx3:#6e6e6e; --chip:rgba(18,18,18,0.04); --hi:rgba(24,71,201,0.08); --hi2:rgba(24,71,201,0.16); }
html { --pri:#1847c9; --prib:#0092ff; --acc:#b40fe7; --ok:#16b364; --warn:#d9a441; --dang:#de3b3b; }
body { margin:0; background:var(--bg,#121212); color:var(--tx,#f8f8f8); -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; }
a { color:var(--prib,#0092ff); text-decoration:none; }
a:hover { color:var(--pri,#1847c9); text-decoration:underline; }
input[type=range] { accent-color:#0092ff; }
::selection { background:rgba(0,146,255,0.3); }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.35; } }
@keyframes fadeInUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes slideInRight { from { transform:translateX(100%); } to { transform:none; } }
@keyframes popIn { from { opacity:0; transform:translateY(6px) scale(0.98); } to { opacity:1; transform:none; } }
@keyframes menuIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
@keyframes toastIn { 0% { opacity:0; transform:translateY(10px); } 12%,88% { opacity:1; transform:none; } 100% { opacity:0; transform:translateY(6px); } }
button { transition:transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
button:active { transform:scale(0.96); }
a { transition:color 0.15s ease, border-color 0.15s ease; }
input, select { transition:border-color 0.15s ease, background 0.15s ease; }

/* ---- beyond the mockup ------------------------------------------------- */

/* The design shows placeholder text in --tx3; browsers default to their own grey. */
::placeholder { color:var(--tx3,#929292); opacity:1; }

/* A native <select> renders its popup with the OS palette, which is white-on-white in
   dark mode. Only the dropdown list needs this; the closed control is styled inline. */
select option { background:var(--s1,#181818); color:var(--tx,#f8f8f8); }
[data-theme="light"] select option { background:#ffffff; color:#121212; }

/* Native date/time pickers ship a dark glyph that disappears on the dark surface. */
[data-theme="dark"] input[type=time]::-webkit-calendar-picker-indicator { filter:invert(1) opacity(0.55); }

/* Scrollbars, so overflow areas do not break the surface palette. */
* { scrollbar-color:var(--line,rgba(255,255,255,0.1)) transparent; scrollbar-width:thin; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--line,rgba(255,255,255,0.1)); border-radius:999px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover { background:var(--tx3,#929292); border:2px solid transparent; background-clip:content-box; }

/* Line clamps. A table cell that grows to five lines pushes the row out of the grid, so
   long text is cut at a fixed number of lines with the full value on the cell's tooltip.
   Written as classes rather than inline style because -webkit-box-orient is dropped by
   some inline-style sanitizers and the whole clamp then silently does nothing. */
.clamp-1, .clamp-2, .clamp-3 { display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-1 { -webkit-line-clamp:1; }
.clamp-2 { -webkit-line-clamp:2; }
.clamp-3 { -webkit-line-clamp:3; }

/* Switching tool. The working area slides in from the side the new tool sits on in the
   switcher, and its icon in the sidebar lifts — enough to see that the context changed
   without making somebody wait for it. */
@keyframes workspaceIn { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:none; } }
@keyframes workspaceBadge { 0% { transform:scale(0.86); } 55% { transform:scale(1.08); } 100% { transform:scale(1); } }

/* Tooltip. The browser's own title="" waits about a second, never fires while the pointer
   sits over a re-rendering row, and cannot respond to a click — so the clipped cells and
   the ⓘ badges draw this instead. Same surfaces and radii as the menus. */
.gtm-tip { position:fixed; z-index:200; display:none; max-width:380px; padding:9px 12px; border-radius:9px;
  background:var(--s1,#181818); border:1px solid rgba(0,146,255,0.35); box-shadow:0 14px 34px rgba(0,0,0,0.5);
  font-family:'Source Sans 3',system-ui,sans-serif; font-size:13px; line-height:1.5; color:var(--tx,#f8f8f8);
  white-space:pre-wrap; overflow-wrap:anywhere; pointer-events:none; animation:fadeIn 0.12s ease both; }

/* Anything that carries a tooltip says so on hover. */
[data-tip] { cursor:help; }

/* Toast — the design defines the toastIn keyframes but never places the element. */
.gtm-toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:120; padding:12px 20px; border-radius:999px; background:var(--s1,#181818); border:1px solid rgba(0,146,255,0.35); box-shadow:0 18px 40px rgba(0,0,0,0.45); font-family:'Inter',sans-serif; font-size:13.5px; color:var(--tx,#f8f8f8); animation:toastIn 2.6s ease both; pointer-events:none; }

/* Login — a single account, so this is a one-field-pair screen, built from the same
   surfaces, radii and type scale as the rest of the app. */
.gtm-login { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--bg,#121212); font-family:'Source Sans 3',system-ui,sans-serif; }
.gtm-login form { width:100%; max-width:380px; background:var(--s1,#181818); border:1px solid var(--line,rgba(255,255,255,0.1)); border-radius:16px; padding:30px 28px; display:flex; flex-direction:column; gap:18px; animation:popIn 0.3s cubic-bezier(0.4,0,0.2,1) both; }
.gtm-login label { font-size:13.5px; font-weight:600; color:var(--tx,#f8f8f8); }
.gtm-login input { width:100%; padding:11px 13px; border-radius:8px; border:1px solid var(--line,rgba(255,255,255,0.1)); background:var(--s2,#1d1d1d); color:var(--tx,#f8f8f8); font-family:'Source Sans 3',sans-serif; font-size:14px; outline:none; }
.gtm-login input:focus { border-color:rgba(0,146,255,0.55); }
.gtm-login button { all:unset; cursor:pointer; text-align:center; padding:12px 16px; border-radius:999px; background:#1847c9; color:#fff; font-weight:600; font-size:14px; }
.gtm-login button:hover { background:#0092ff; }