/* ============================================================
   CYBERPUNK 2077 THEME for GitLab CE
   Палитра: чёрный / жёлтый (#fcee0a) / циан / кроваво-красный
   Инъекция через nginx sub_filter — инструкция в чате.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;700&family=Share+Tech+Mono&display=swap');

:root {
  --cp-bg:        #050505;
  --cp-bg-alt:    #0d0d0d;
  --cp-panel:     #111111;
  --cp-border:    #2a2a2a;
  --cp-yellow:    #fcee0a;
  --cp-cyan:      #00f0ff;
  --cp-red:       #f7053c;
  --cp-text:      #e8e8e8;
  --cp-text-dim:  #9a9a9a;
  --cp-clip: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

/* --- scanline overlay --- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.025) 0px,
    rgba(255,255,255,0.025) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

/* --- base --- */
body,
.layout-page,
.content-wrapper,
.gl-drawer,
.gl-modal .modal-content {
  background-color: var(--cp-bg) !important;
  color: var(--cp-text) !important;
}

body, .navbar, .nav-sidebar, .btn, input, select, textarea {
  font-family: 'Share Tech Mono', 'Courier New', monospace !important;
}

h1, h2, h3, h4, h5, h6, .page-title, .title {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  color: var(--cp-yellow) !important;
  text-shadow: 0 0 6px rgba(252,238,10,0.5), 2px 0 var(--cp-cyan), -2px 0 var(--cp-red);
  letter-spacing: 1px;
  animation: cp-flicker 6s infinite;
}

@keyframes cp-flicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: 0.6; }
  94% { opacity: 1; }
  95% { opacity: 0.7; text-shadow: 2px 0 var(--cp-red), -2px 0 var(--cp-cyan); }
  96% { opacity: 1; }
}

/* --- top navbar --- */
.navbar-gitlab {
  background: var(--cp-bg-alt) !important;
  border-bottom: 2px solid var(--cp-yellow) !important;
  box-shadow: 0 0 16px rgba(252,238,10,0.35);
}

.navbar-gitlab .nav-link,
.navbar-gitlab a {
  color: var(--cp-text) !important;
}

.navbar-gitlab .nav-link:hover,
.navbar-gitlab a:hover {
  color: var(--cp-yellow) !important;
  text-shadow: 0 0 8px var(--cp-yellow);
}

/* --- sidebar --- */
.nav-sidebar {
  background-color: var(--cp-bg-alt) !important;
  border-right: 1px solid var(--cp-border) !important;
}

.nav-sidebar li a {
  color: var(--cp-text-dim) !important;
}

.nav-sidebar li.active > a,
.nav-sidebar li a:hover {
  color: var(--cp-yellow) !important;
  background: rgba(252,238,10,0.08) !important;
  box-shadow: inset 3px 0 0 var(--cp-yellow);
}

/* --- links --- */
a {
  color: var(--cp-cyan) !important;
}
a:hover {
  color: var(--cp-yellow) !important;
  text-shadow: 0 0 6px var(--cp-yellow);
}

/* --- panels / cards / containers (угловатые срезанные углы) --- */
.card,
.panel,
.file-holder,
.gl-tabs-nav,
.detail-page-header,
.issuable-details,
.diff-file {
  background-color: var(--cp-panel) !important;
  border: 1px solid var(--cp-border) !important;
  border-left: 3px solid var(--cp-yellow) !important;
  box-shadow: 0 0 12px rgba(0,240,255,0.15);
  clip-path: var(--cp-clip);
}

/* --- buttons --- */
.btn {
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
  border: 1px solid var(--cp-border) !important;
  background-color: var(--cp-panel) !important;
  color: var(--cp-text) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.15s ease-in-out;
}

.btn:hover {
  box-shadow: 0 0 10px var(--cp-yellow);
  border-color: var(--cp-yellow) !important;
  color: var(--cp-yellow) !important;
}

.btn-confirm,
.btn-success {
  background-color: transparent !important;
  border: 1px solid var(--cp-cyan) !important;
  color: var(--cp-cyan) !important;
  text-shadow: 0 0 6px var(--cp-cyan);
}
.btn-confirm:hover,
.btn-success:hover {
  box-shadow: 0 0 12px var(--cp-cyan);
}

.btn-danger,
.btn-remove {
  background-color: transparent !important;
  border: 1px solid var(--cp-red) !important;
  color: var(--cp-red) !important;
  text-shadow: 0 0 6px var(--cp-red);
}
.btn-danger:hover,
.btn-remove:hover {
  box-shadow: 0 0 12px var(--cp-red);
}

/* --- code blocks / diffs --- */
pre, code, .code, .line_content {
  background-color: #000000 !important;
  color: var(--cp-cyan) !important;
  border: 1px solid var(--cp-border) !important;
  text-shadow: 0 0 3px rgba(0,240,255,0.35);
}

.diff-line-num {
  background-color: var(--cp-bg-alt) !important;
  color: var(--cp-text-dim) !important;
}

/* --- badges / labels --- */
.badge, .gl-label, .label {
  background-color: transparent !important;
  border: 1px solid var(--cp-yellow) !important;
  color: var(--cp-yellow) !important;
  border-radius: 0 !important;
}

/* --- inputs --- */
input, select, textarea, .form-control {
  background-color: #000000 !important;
  border: 1px solid var(--cp-border) !important;
  color: var(--cp-text) !important;
  border-radius: 0 !important;
}
input:focus, select:focus, textarea:focus, .form-control:focus {
  border-color: var(--cp-yellow) !important;
  box-shadow: 0 0 8px var(--cp-yellow) !important;
}

/* --- scrollbar (webkit) --- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--cp-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--cp-yellow);
  border-radius: 0;
  box-shadow: 0 0 6px var(--cp-cyan);
}

/* --- pipeline status glow accents --- */
.ci-status-icon-success svg { filter: drop-shadow(0 0 4px var(--cp-cyan)); }
.ci-status-icon-failed svg  { filter: drop-shadow(0 0 4px var(--cp-red)); }
.ci-status-icon-running svg { filter: drop-shadow(0 0 4px var(--cp-yellow)); }