/*
 * Console look for GitLab: the same font, colours, sidebar, header and
 * breadcrumbs as the panel. Injected into every HTML page by the "theme"
 * service (nginx) that sits between the proxy and GitLab — GitLab itself is
 * untouched, so its own updates are unaffected.
 *
 * Only looks are changed: the items in the sidebar stay GitLab's own.
 * After a large GitLab upgrade some class names may move — adjust here and
 * run "docker compose restart theme".
 */

@font-face {
  font-family: "Edge Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/edge-theme/fonts/inter-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Edge Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/edge-theme/fonts/inter-cyrillic-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Edge Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/edge-theme/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Edge Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/edge-theme/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --edge-brand: #3a83f7;
  --edge-brand-600: #2c72e2;
  --edge-brand-weak: #e3edfd;
  --edge-ink: #1f2328;
  --edge-ink-2: #5b616e;
  --edge-ink-3: #8b919c;
  --edge-line: #e5e7eb;
  --edge-line-strong: #cfd3d9;
  --edge-hover: #f0f1f3;
  --edge-surface: #f4f5f7;
  --edge-font: "Edge Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --edge-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

/* ---- typography: the panel's font everywhere but in code ---- */

html,
body,
button,
input,
select,
textarea,
.super-sidebar,
.super-topbar,
.gl-button,
.gl-form-input,
.md,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--edge-font) !important;
}

code,
pre,
kbd,
samp,
.monospace,
.gl-font-monospace,
.code,
.diff-content,
.file-content {
  font-family: var(--edge-mono) !important;
}

body {
  font-size: 13px !important;
  line-height: 18px !important;
  color: var(--edge-ink) !important;
  -webkit-font-smoothing: antialiased;
}

h1,
.page-title,
.gl-heading-1 {
  font-size: 17px !important;
  line-height: 24px !important;
  font-weight: 600 !important;
}

h2,
.gl-heading-2 {
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* ---- sidebar ---- */

.super-sidebar {
  width: 236px !important;
  background: #fff !important;
  border-right: 1px solid var(--edge-line) !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Brand row: the console's mark and name, 52px like the panel. GitLab puts
   its own context text here ("Your work", a project name) — it is replaced,
   the same context is right there in the breadcrumbs. theme.js fills
   --edge-title and --edge-logo from the panel's Settings → Name and logo. */
.super-sidebar .super-sidebar-context-header {
  display: flex !important;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 14px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--edge-line);
  font-size: 0 !important;
  color: var(--edge-ink) !important;
}

.super-sidebar .super-sidebar-context-header::after {
  content: var(--edge-title, "");
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.super-sidebar .super-sidebar-context-header::before {
  content: "";
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  background-image: var(--edge-logo, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%232f7df6'/%3E%3Cstop offset='1' stop-color='%237fb4ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='32' height='32' rx='8' fill='url(%23g)'/%3E%3Cpath d='M9 21.5 16 9l7 12.5h-4.2L16 16.3l-2.8 5.2z' fill='%23fff'/%3E%3C/svg%3E"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px 28px;
  border-radius: 6px;
}

.super-sidebar .contextual-nav {
  padding-top: 8px !important;
}

/* Rows: 40px tall, icon then label, full width, no rounded corners. */
.super-sidebar .gl-nav-item,
.super-sidebar .super-sidebar-nav-item {
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 19px !important;
  gap: 12px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  line-height: 18px !important;
  font-weight: 400 !important;
  color: var(--edge-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.super-sidebar .gl-nav-item:hover,
.super-sidebar .super-sidebar-nav-item:hover {
  background: var(--edge-hover) !important;
}

.super-sidebar .gl-nav-item.selected,
.super-sidebar .super-sidebar-nav-item.selected,
.super-sidebar .gl-nav-item[aria-current="page"],
.super-sidebar .super-sidebar-nav-item[aria-current="page"] {
  background: var(--edge-brand-weak) !important;
  color: var(--edge-ink) !important;
  font-weight: 400 !important;
}

.super-sidebar .gl-nav-item-indicator,
.super-sidebar .gl-nav-item::before,
.super-sidebar .gl-nav-item::after {
  display: none !important;
}

.super-sidebar .gl-nav-item svg,
.super-sidebar .super-sidebar-nav-item svg {
  width: 18px !important;
  height: 18px !important;
  color: var(--edge-ink-2) !important;
}

.super-sidebar .gl-nav-item-label,
.super-sidebar .super-sidebar-nav-item-title {
  font-size: 13px !important;
  font-weight: inherit !important;
}

/* Group captions above lists: small uppercase, as in the panel. */
.super-sidebar .gl-nav-group-label,
.super-sidebar [data-testid="nav-item-list-title"],
.super-sidebar .super-sidebar-nav-section-title {
  padding: 16px 19px 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--edge-ink-3) !important;
}

/* Lists run edge to edge; only the thin separators stay. */
.super-sidebar ul {
  margin: 0 !important;
  padding: 0 !important;
}

.super-sidebar .gl-relative.gl-px-3,
.super-sidebar .gl-px-3.gl-py-2,
.super-sidebar .gl-flex.gl-flex-col.gl-gap-2.gl-p-3,
.super-sidebar .gl-px-3.gl-pb-3 {
  padding-left: 0 !important;
  padding-right: 0 !important;
  gap: 0 !important;
}

.super-sidebar hr,
.super-sidebar .gl-border-t {
  border-color: var(--edge-line) !important;
  margin: 8px 0 !important;
}

/* Collapsed state: GitLab marks the sidebar "icon only" — give it the
   panel's 57px rail and let the header and content follow. */
.super-sidebar.super-sidebar-is-icon-only {
  width: 57px !important;
}

.super-sidebar.super-sidebar-is-icon-only .gl-nav-item,
.super-sidebar.super-sidebar-is-icon-only .super-sidebar-nav-item {
  padding: 0 !important;
  justify-content: center !important;
  gap: 0 !important;
}

/* Collapsed: GitLab drops the brand row from the page, so the console mark
   is drawn on the rail itself — same 52px row as in the panel. */
.super-sidebar.super-sidebar-is-icon-only::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  height: 52px;
  border-bottom: 1px solid var(--edge-line);
  background-image: var(--edge-logo, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%232f7df6'/%3E%3Cstop offset='1' stop-color='%237fb4ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='32' height='32' rx='8' fill='url(%23g)'/%3E%3Cpath d='M9 21.5 16 9l7 12.5h-4.2L16 16.3l-2.8 5.2z' fill='%23fff'/%3E%3C/svg%3E"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px 28px;
}

.layout-page:has(.super-sidebar.super-sidebar-is-icon-only) {
  grid-template-columns: 57px minmax(0, 1fr) 0 !important;
}

body:has(.super-sidebar.super-sidebar-is-icon-only) .super-topbar {
  margin-left: 57px !important;
  width: calc(100% - 57px) !important;
}

/* Bottom strip: the panel has no words here, just a small arrow that flips
   when the sidebar is collapsed. */
.super-sidebar div:has(> [data-testid="super-sidebar-collapse-button"]) {
  margin: 0 !important;
  padding: 0 !important;
}

.super-sidebar [data-testid="super-sidebar-collapse-button"] {
  position: relative;
  width: 100% !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-top: 1px solid var(--edge-line) !important;
  border-radius: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
}

.super-sidebar [data-testid="super-sidebar-collapse-button"] > * {
  display: none !important;
}

.super-sidebar [data-testid="super-sidebar-collapse-button"]::after {
  /* The rule above hides ::after on every nav item; this one is an arrow. */
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 7px;
  height: 9px;
  background-color: var(--edge-ink-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 9'%3E%3Cpath d='M6.5 0v9L0 4.5z' fill='%23000'/%3E%3C/svg%3E") center / 7px 9px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 9'%3E%3Cpath d='M6.5 0v9L0 4.5z' fill='%23000'/%3E%3C/svg%3E") center / 7px 9px no-repeat;
}

.super-sidebar [data-testid="super-sidebar-collapse-button"]:hover {
  background: var(--edge-hover) !important;
}

.super-sidebar [data-testid="super-sidebar-collapse-button"]:hover::after {
  background-color: var(--edge-ink-2);
}

.super-sidebar.super-sidebar-is-icon-only [data-testid="super-sidebar-collapse-button"]::after {
  transform: rotate(180deg);
}

/* ---- page frame: sidebar at full height, header only over the content ---- */

.layout-page {
  grid-template-columns: 236px minmax(0, 1fr) 0 !important;
  column-gap: 0 !important;
  /* GitLab keeps an 8px gutter around its content panel; the panel has none. */
  padding: 0 !important;
  background: #fff !important;
}

.content-panels,
.content-wrapper.static-panel {
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.super-sidebar-wrapper,
.super-sidebar {
  margin: 0 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
}

.super-topbar {
  margin-left: 236px !important;
  width: calc(100% - 236px) !important;
}

/* GitLab's own logo in the top strip: the console mark is in the sidebar. */
.super-topbar .brand-logo,
.super-topbar .tanuki-logo,
.super-topbar [data-testid="brand-header-default-link"] {
  display: none !important;
}

/* ---- header and breadcrumbs ---- */

/* One header row: crumbs, then search, then actions — a flex row, because
   the breadcrumbs are moved in here and GitLab's three grid cells no longer
   line up. */
.super-topbar {
  display: flex !important;
  align-items: center;
  gap: 12px;
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 16px !important;
  background: #fff !important;
  border-bottom: 1px solid var(--edge-line) !important;
  box-shadow: none !important;
}

.super-topbar > nav[aria-label="Breadcrumb"],
.super-topbar > nav.gl-breadcrumbs {
  flex: 1 1 auto;
  min-width: 0;
}

.super-topbar > *:not(nav[aria-label="Breadcrumb"]):not(nav.gl-breadcrumbs) {
  flex: 0 0 auto;
}

/* The strip that used to hold the breadcrumbs collapses to nothing. */
.content-wrapper > .panel-header {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
}

.super-topbar .gl-search-box-by-type,
.super-topbar input[type="search"],
.super-topbar .gl-form-input,
#super-sidebar-search,
[data-testid="super-sidebar-search-button"] {
  height: 28px !important;
  min-height: 28px !important;
  max-width: 320px;
  border-radius: 6px !important;
  border-color: var(--edge-line) !important;
  background: #fff !important;
  font-size: 13px !important;
  box-shadow: none !important;
}

nav[aria-label="Breadcrumb"],
.gl-breadcrumbs,
.breadcrumbs {
  align-items: center;
  font-size: 13px !important;
  line-height: 18px !important;
}

/* Breadcrumbs live in the header (moved there by theme.js), as in the panel:
   one 40px row — crumbs on the left, search and actions on the right. */
.super-topbar nav[aria-label="Breadcrumb"],
.super-topbar nav.gl-breadcrumbs {
  height: 40px !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden;
}

.super-topbar nav[aria-label="Breadcrumb"] .gl-breadcrumb-list {
  margin: 0 !important;
  flex-wrap: nowrap;
}

/* The row the crumbs came from must not leave a gap behind. */
.content-wrapper .gl-breadcrumbs-container:empty,
.content-wrapper [data-testid="breadcrumb-links"]:empty {
  display: none !important;
}

/* A house before the first crumb, as in the panel's breadcrumb bar. */
.gl-breadcrumb-list > li:first-child > a::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 6px;
  vertical-align: -3px;
  background-color: var(--edge-ink-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8H9v8'/%3E%3Cpath d='M3 10.2V21h18V10.2a1 1 0 0 0-.4-.8l-8-6a1 1 0 0 0-1.2 0l-8 6a1 1 0 0 0-.4.8z'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8H9v8'/%3E%3Cpath d='M3 10.2V21h18V10.2a1 1 0 0 0-.4-.8l-8-6a1 1 0 0 0-1.2 0l-8 6a1 1 0 0 0-.4.8z'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
}

nav[aria-label="Breadcrumb"] a,
.gl-breadcrumb-item a {
  color: var(--edge-ink) !important;
  text-decoration: none !important;
}

nav[aria-label="Breadcrumb"] a:hover,
.gl-breadcrumb-item a:hover {
  color: var(--edge-brand-600) !important;
}

nav[aria-label="Breadcrumb"] li:last-child a,
nav[aria-label="Breadcrumb"] li[aria-current="page"],
.gl-breadcrumb-item:last-child a {
  font-weight: 500 !important;
}

/* Separators in the muted ink colour, like the panel's slashes. */
nav[aria-label="Breadcrumb"] svg,
.gl-breadcrumb-item svg.gl-breadcrumb-separator {
  color: var(--edge-ink-3) !important;
}

/* ---- controls and cards ---- */

.gl-button,
.btn {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 12px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

.gl-button.btn-block,
.btn-lg {
  height: 36px !important;
}

.btn-confirm,
.gl-button.btn-confirm:not(.disabled):not(:disabled) {
  background-color: var(--edge-brand) !important;
  border-color: var(--edge-brand) !important;
  color: #fff !important;
}

.btn-confirm:hover,
.gl-button.btn-confirm:hover:not(.disabled):not(:disabled) {
  background-color: var(--edge-brand-600) !important;
  border-color: var(--edge-brand-600) !important;
}

.gl-form-input,
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
  border-radius: 6px !important;
  border-color: var(--edge-line) !important;
  font-size: 13px !important;
}

.gl-form-input:focus,
.form-control:focus {
  border-color: var(--edge-brand) !important;
  box-shadow: 0 0 0 2px rgba(58, 131, 247, 0.15) !important;
}

.gl-card,
.card,
.gl-panel {
  border: 1px solid var(--edge-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

a,
.gl-link {
  color: var(--edge-brand-600);
}

/* ---- flat white page, no card frame around the content ---- */

html,
body,
.layout-page,
.content-wrapper,
main.content {
  background-color: #fff !important;
}

.content-wrapper.static-panel,
.content-wrapper.paneled-view {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

main.content,
#content-body {
  padding: 16px 20px 40px !important;
}

/* ---- sign-in page (reachable at ?auto_sign_in=false) ---- */

.login-page .login-box,
.login-page .borderless {
  border: 1px solid var(--edge-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}