html { font-size: 14px; } @media (min-width: 768px) { html { font-size: 16px; } } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; } html { position: relative; min-height: 100%; } body { margin-bottom: 60px; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* Lightweight "Snowflake-style" tabs: flat labels, blue underline on active */ .nav-tabs.nav-tabs-lite { border-bottom: 1px solid #dee2e6; } .nav-tabs.nav-tabs-lite .nav-link { border: 0; border-bottom: 2px solid transparent; background: transparent; color: #6c757d; padding: 0.5rem 1rem; margin-bottom: -1px; font-weight: 500; } .nav-tabs.nav-tabs-lite .nav-link:hover { color: #212529; border-bottom-color: transparent; } .nav-tabs.nav-tabs-lite .nav-link.active { color: #0d6efd; background: transparent; border-bottom-color: #0d6efd; font-weight: 600; } /* Sortable table headers — reusable across pipeline tables */ th.sortable { cursor: pointer; user-select: none; } th.sortable:hover { background-color: rgba(0,0,0,0.15); text-decoration: underline; text-underline-offset: 3px; } /* Pipeline table body — slightly smaller than header for visual hierarchy */ .pipeline-table tbody { font-size: 0.9em; } /* Connector icons — Fivetran-style small inline logos */ img[src*="connectors/"] { vertical-align: text-bottom; } .sort-arrow::after { content: ''; margin-left: 4px; } .sort-asc::after { content: '\25B2'; font-size: 0.7em; } .sort-desc::after { content: '\25BC'; font-size: 0.7em; } /* Run history table — compact font */ #run-history-table { font-size: 0.8rem; } #run-history-table thead { font-size: 0.75rem; } /* ───────────────────────────────────────────────────────────────────── Left navigation rail (Snowflake-style sidebar) Used by Portal + Internal layouts. Body opt-in via .has-rail. Toggle .rail-collapsed on to switch to icon-only mode. ───────────────────────────────────────────────────────────────────── */ :root { --rail-w: 220px; --rail-w-collapsed: 56px; --rail-trans: width 0.15s ease, margin-left 0.15s ease; } /* Lock the page to viewport height so the main pane owns vertical scroll instead of the document. Keeps the fixed rail glued in place and stops wide tables/pages from creating a body-level scrollbar that fights the sidebar. */ html.has-rail, body.has-rail { margin: 0; height: 100vh; overflow: hidden; background: #f6f8fa; } .app-rail { position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail-w); display: flex; flex-direction: column; z-index: 1030; transition: var(--rail-trans); overflow: hidden; } body.rail-collapsed .app-rail { width: var(--rail-w-collapsed); } /* Theme variants */ .app-rail.theme-portal { background: #0d6efd; color: #ffffff; --rail-fg-muted: rgba(255,255,255,0.78); --rail-hover: rgba(255,255,255,0.12); --rail-active: rgba(255,255,255,0.22); --rail-border: rgba(255,255,255,0.15); --rail-group: rgba(255,255,255,0.55); --rail-raised: #0b62e4; /* profile menu surface — must be opaque, it overlaps page content */ } .app-rail.theme-internal { background: #212529; color: #ffffff; --rail-fg-muted: rgba(255,255,255,0.7); --rail-hover: rgba(255,255,255,0.08); --rail-active: rgba(255,255,255,0.18); --rail-border: rgba(255,255,255,0.12); --rail-group: rgba(255,255,255,0.5); --rail-raised: #2b3035; } /* Header: brand + collapse toggle */ .rail-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 12px 16px; gap: 6px; } .rail-head .brand { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font-weight: 700; font-size: 1.1rem; overflow: hidden; white-space: nowrap; flex: 1 1 auto; min-width: 0; } .rail-head .brand i { font-size: 1.25rem; flex: 0 0 auto; } .rail-head .brand .brand-img { width: 24px; height: 24px; flex: 0 0 auto; object-fit: contain; border-radius: 4px; } body.rail-collapsed .rail-head .brand .brand-text { display: none; } .rail-toggle { background: transparent; border: 0; color: inherit; width: 28px; height: 28px; border-radius: 5px; display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; } .rail-toggle:hover { background: var(--rail-hover); } .rail-toggle i { font-size: 1rem; } /* Nav body */ .rail-nav { flex: 1 1 auto; overflow-y: auto; padding: 4px 8px; } .rail-nav .nav-item-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 1px 0; color: var(--rail-fg-muted); text-decoration: none; border-radius: 6px; font-size: 0.93rem; white-space: nowrap; overflow: hidden; } .rail-nav .nav-item-link i { width: 18px; font-size: 1rem; flex: 0 0 auto; text-align: center; } .rail-nav .nav-item-link:hover { background: var(--rail-hover); color: #fff; } .rail-nav .nav-item-link.active { background: var(--rail-active); color: #fff; font-weight: 600; } .rail-nav .nav-group-label { padding: 14px 12px 4px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--rail-group); white-space: nowrap; overflow: hidden; } body.rail-collapsed .rail-nav .nav-item-link .label, body.rail-collapsed .rail-nav .nav-group-label { display: none; } body.rail-collapsed .rail-nav .nav-item-link { justify-content: center; padding: 8px 0; } /* Docs is now a single top-level rail link to docs.elglide.com (the expandable submenu + "Help" group label were removed 2026-06-18 — see Portal _Layout). */ /* Separates the pinned help zone (Docs / What's New) from the groups above it. A bare rule rather than a group label — the "Help" label was removed as redundant 2026-06-18 and the divider carries the same separation silently. */ .rail-nav .nav-divider { height: 1px; background: var(--rail-border); margin: 10px 10px 8px; } /* Footer: user identity chip + its popup menu */ .rail-foot { border-top: 1px solid var(--rail-border); padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 8px; position: relative; /* containing block for .profile-menu */ } .rail-foot .user-row { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 0.82rem; min-width: 0; } .rail-foot .user-row .avatar { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.18); display: grid; place-items: center; font-weight: 700; font-size: 0.75rem; flex: 0 0 auto; } .rail-foot .user-row .meta { line-height: 1.15; flex: 1 1 auto; min-width: 0; overflow: hidden; } .rail-foot .user-row .meta .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rail-foot .user-row .meta .role { font-size: 0.68rem; color: var(--rail-fg-muted); text-transform: uppercase; letter-spacing: 0.04em; } /* The avatar+name chip opens the profile menu (was a direct link until 2026-07-18). It is a