/* ================================================================
   computermate 업무포털 테마  v2.0
   주입: Nginx sub_filter (GitLab 버전 독립)
   수정: 이 파일만 편집 → Nginx/Puma 재시작 불필요
================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');

/* ── 디자인 토큰 ─────────────────────────────────────────────── */
:root {
  --cm-sidebar-bg:       #0d1f33;
  --cm-sidebar-hover:    rgba(255,255,255,0.06);
  --cm-sidebar-active:   rgba(59,158,221,0.15);
  --cm-sidebar-divider:  rgba(255,255,255,0.07);
  --cm-sidebar-text:     rgba(255,255,255,0.80);
  --cm-sidebar-muted:    rgba(255,255,255,0.38);
  --cm-sidebar-icon:     rgba(255,255,255,0.50);
  --cm-sidebar-icon-act: #3b9edd;
  --cm-accent:           #3b9edd;
  --cm-accent-dark:      #1a6fa8;
  --cm-topbar-bg:        #111d2e;
  --cm-page-bg:          #f4f6f9;
  --cm-surface:          #ffffff;
  --cm-border:           #e2e8f0;
  --cm-text:             #1e2d3d;
  --cm-text-sub:         #64748b;
  --cm-text-muted:       #94a3b8;
  --cm-shadow-sm:        0 1px 3px rgba(15,33,53,0.08);
  --cm-shadow-md:        0 4px 12px rgba(15,33,53,0.10);
  --cm-radius:           8px;
  --cm-radius-sm:        6px;
  --cm-ease:             150ms ease;
}

/* ── 글꼴 ────────────────────────────────────────────────────── */
html, body, input, button, select, textarea {
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont,
               'Segoe UI', sans-serif !important;
}

/* ── 사이드바 기본 ────────────────────────────────────────────── */
/* 리터럴 값 사용 – CSS 변수 해석 순서 문제 방지 */
.super-sidebar,
.application-chrome .super-sidebar,
.application-chrome.page-with-panels .super-sidebar {
  background-color: #0d1f33 !important;
  background:       #0d1f33 !important;
  border-right: 1px solid rgba(255,255,255,0.07) !important;
  /* GitLab 내부 CSS 변수도 덮어쓰기 */
  --super-sidebar-bg:                  #0d1f33;
  --super-sidebar-nav-item-hover-bg:   rgba(255,255,255,0.06);
  --super-sidebar-nav-item-active-bg:  rgba(59,158,221,0.15);
  --super-sidebar-nav-item-current-bg: rgba(59,158,221,0.15);
  --super-sidebar-accent-color-fg:     #7ec8f5;
  --super-sidebar-accent-color-bg:     rgba(59,158,221,0.15);
}

/* 상단 유저바 */
.super-sidebar .user-bar {
  background-color: rgba(0,0,0,0.25) !important;
  border-bottom: 1px solid var(--cm-sidebar-divider) !important;
}

/* ── 사이드바 아이콘 ──────────────────────────────────────────── */
/* 비선택 아이콘: 하드코딩 제거 → GitLab 테마 변수 사용 */
.super-sidebar svg {
  transition: color var(--cm-ease), fill var(--cm-ease) !important;
}

/* 활성 메뉴 아이콘 → accent 색 */
.super-sidebar [aria-current="page"] svg,
.super-sidebar .active > a svg,
.super-sidebar .super-sidebar-nav-item-current svg {
  color: var(--super-sidebar-accent-color-fg) !important;
  fill:  var(--super-sidebar-accent-color-fg) !important;
}

/* ── 활성 메뉴 스타일 ─────────────────────────────────────────── */
.super-sidebar [aria-current="page"],
.super-sidebar .active > a {
  background-color: var(--cm-sidebar-active) !important;
  border-radius: var(--cm-radius-sm) !important;
  position: relative !important;
}

/* 왼쪽 액센트 바 */
.super-sidebar [aria-current="page"]::after,
.super-sidebar .active > a::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 18% !important;
  height: 64% !important;
  width: 2.5px !important;
  background: var(--cm-accent) !important;
  border-radius: 0 2px 2px 0 !important;
}

/* 활성 텍스트 */
.super-sidebar [aria-current="page"] span,
.super-sidebar .active > a span {
  color: #ffffff !important;
  font-weight: 500 !important;
}

/* ── 섹션 레이블 ─────────────────────────────────────────────── */
.super-sidebar [class*="section-header"] span,
.super-sidebar [class*="context-header"] span {
  color: var(--cm-sidebar-muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}

/* ── 배지 ────────────────────────────────────────────────────── */
.super-sidebar [class*="badge"],
.super-sidebar [class*="count-badge"] {
  background-color: var(--cm-accent) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 1px 6px !important;
}

/* ── 포커스 아웃라인 제거 ────────────────────────────────────── */
.super-sidebar *,
.super-sidebar *:focus,
.super-sidebar *:focus-visible,
.super-sidebar *:focus-within {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

/* ── 탑바 ────────────────────────────────────────────────────── */
.ui-indigo .super-topbar,
.ui-blue    .super-topbar,
.ui-green   .super-topbar,
.ui-red     .super-topbar,
.ui-gray    .super-topbar,
.ui-neutral .super-topbar,
.gl-dark    .super-topbar {
  background-color: var(--cm-topbar-bg) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  --super-sidebar-bg: var(--cm-topbar-bg) !important;
}

/* 탑바 아이콘 (다크 배경 → 밝은 아이콘) */
.super-topbar svg {
  color: rgba(255,255,255,0.55) !important;
  fill:  rgba(255,255,255,0.55) !important;
  transition: color var(--cm-ease) !important;
}

.super-topbar a:hover svg,
.super-topbar button:hover svg {
  color: rgba(255,255,255,0.90) !important;
  fill:  rgba(255,255,255,0.90) !important;
}

/* 탑바 세로 정렬 */
.super-topbar {
  align-items: center !important;
}

/* 탑바 텍스트 – 드롭다운 팝업 내부는 제외 */
.super-topbar > * a,
.super-topbar > * button,
.super-topbar > nav a,
.super-topbar > nav button {
  color: rgba(255,255,255,0.80) !important;
  transition: color var(--cm-ease) !important;
}

.super-topbar > * a:hover,
.super-topbar > * button:hover {
  color: #ffffff !important;
}

/* 탑바 버튼 높이 통일 + 흰 배경 제거 */
.super-topbar .gl-button {
  height: 32px !important;
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* 아이콘 전용 버튼 – 정사각형 */
.super-topbar .gl-button.btn-icon {
  width: 32px !important;
  padding: 0 !important;
}

/* 호버: 반투명 하이라이트 */
.super-topbar .gl-button:hover,
.super-topbar .gl-button:focus {
  background: rgba(255,255,255,0.08) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* 탑바 링크(a)도 동일 높이 */
.super-topbar a.gl-button {
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* 드롭다운/팝업 패널은 기본 색상 유지 */
.gl-new-dropdown-panel,
.gl-dropdown-contents,
.gl-popover,
[data-testid="new-menu-toggle-panel"],
.new-nav-toggle-panel {
  background: #ffffff !important;
  color: var(--cm-text) !important;
}

.gl-new-dropdown-panel *,
.gl-dropdown-contents *,
[data-testid="new-menu-toggle-panel"] * {
  color: var(--cm-text) !important;
}

.gl-new-dropdown-panel a,
.gl-dropdown-contents a,
[data-testid="new-menu-toggle-panel"] a {
  color: var(--cm-text) !important;
}

.gl-new-dropdown-panel a:hover,
.gl-dropdown-contents a:hover,
[data-testid="new-menu-toggle-panel"] a:hover {
  color: var(--cm-text) !important;
  background-color: #f4f6f9 !important;
}

/* 검색창 */
.super-topbar input {
  background-color: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 8px !important;
  color: rgba(255,255,255,0.90) !important;
  transition: border-color var(--cm-ease), background-color var(--cm-ease) !important;
}

.super-topbar input:focus {
  background-color: rgba(255,255,255,0.11) !important;
  border-color: var(--cm-accent) !important;
}

.super-topbar input::placeholder {
  color: rgba(255,255,255,0.32) !important;
}

/* ── 메인 콘텐츠 ─────────────────────────────────────────────── */
.content-wrapper {
  background-color: var(--cm-page-bg) !important;
}

/* 카드 */
.gl-card,
.card,
.board-card {
  background: var(--cm-surface) !important;
  border: 1px solid var(--cm-border) !important;
  border-radius: var(--cm-radius) !important;
  box-shadow: var(--cm-shadow-sm) !important;
  transition: box-shadow var(--cm-ease), transform var(--cm-ease) !important;
}

.gl-card:hover,
.card:hover {
  box-shadow: var(--cm-shadow-md) !important;
  transform: translateY(-1px) !important;
}

.gl-card .gl-card-header {
  background-color: #fafbfc !important;
  border-bottom: 1px solid var(--cm-border) !important;
  border-radius: var(--cm-radius) var(--cm-radius) 0 0 !important;
  font-weight: 600 !important;
  color: var(--cm-text) !important;
  font-size: 13px !important;
}

/* 테이블 */
.gl-table thead th,
table.table thead th {
  background-color: #f8fafc !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: var(--cm-text-muted) !important;
  border-bottom: 2px solid var(--cm-border) !important;
}

/* 버튼 – Confirm (primary만 배경 적용, tertiary 제외) */
.btn-confirm:not(.btn-tertiary),
.gl-button.btn-confirm:not(.btn-tertiary) {
  background: linear-gradient(160deg, #1565c0 0%, #1976d2 100%) !important;
  border: none !important;
  border-radius: var(--cm-radius-sm) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  box-shadow: 0 1px 4px rgba(21,101,192,0.28) !important;
  transition: all var(--cm-ease) !important;
}

.btn-confirm:not(.btn-tertiary):hover,
.gl-button.btn-confirm:not(.btn-tertiary):hover {
  background: linear-gradient(160deg, #1976d2 0%, #1e88e5 100%) !important;
  box-shadow: 0 3px 10px rgba(21,101,192,0.38) !important;
  transform: translateY(-1px) !important;
}

.gl-button {
  border-radius: var(--cm-radius-sm) !important;
  transition: all var(--cm-ease) !important;
}

/* 폼 포커스 */
.form-control:focus,
.gl-form-input:focus {
  border-color: var(--cm-accent) !important;
  box-shadow: 0 0 0 3px rgba(59,158,221,0.14) !important;
}

/* ── 헤더(브레드크럼) 아래 여백 ────────────────────────────── */
.breadcrumbs,
.top-bar-fixed,
[data-testid="page-heading"],
.page-content-header {
  margin-bottom: 16px !important;
}

/* 페이지 제목 영역 하단 여백 */
.gl-flex.gl-items-center.gl-justify-between,
.page-title-with-buttons {
  margin-bottom: 12px !important;
}

/* ── 필터/정렬 바 내부 간격 ─────────────────────────────────── */

/* 정렬 컨트롤: "만든 날짜" 드롭다운 + 방향 버튼 사이 간격 */
[data-testid="groups-projects-sort"] .gl-flex,
[data-testid="groups-projects-sort"] .gl-sorting {
  gap: 6px !important;
}

[data-testid="groups-projects-sort"] .gl-flex > *,
[data-testid="groups-projects-sort"] .gl-sorting > * {
  margin-right: 0 !important;
}

/* 필터 바 전체 패딩 조정 */
.gl-border-t.gl-bg-subtle.gl-p-5 {
  padding: 16px 20px !important;
}

/* 검색바 내부 요소 간격 */
.gl-border-t.gl-bg-subtle .gl-flex.gl-gap-3 {
  gap: 10px !important;
  align-items: center !important;
}

/* 필터 검색바: 왼쪽(최근검색)·오른쪽(검색) 버튼 테두리 제거 */
.gl-search-box-by-click .gl-search-box-by-click-history > .gl-button {
  border-color: transparent !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

.gl-search-box-by-click .gl-search-box-by-click-search-button.gl-button {
  border-color: transparent !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

/* ── 프로젝트 목록 행 간격 ───────────────────────────────────── */
/* 실제 클래스: <div class="gl-border-b gl-flex gl-items-start gl-py-4"> */
#js-your-work-projects-app .gl-border-b.gl-py-4,
.dashboard-filter .gl-border-b.gl-py-4 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  transition: background-color var(--cm-ease) !important;
}

#js-your-work-projects-app li:hover .gl-border-b.gl-py-4 {
  background-color: #f8fafc !important;
  border-radius: var(--cm-radius) !important;
}

/* 리스트 ul 기본 여백 */
#js-your-work-projects-app ul.gl-list-none > li {
  padding: 0 2px !important;
  margin-bottom: 2px !important;
}

/* 탭 하단 여백 */
.nav-tabs,
.gl-tabs-nav {
  margin-bottom: 16px !important;
}

/* 테이블 행 여백 */
table.table tbody tr td,
.gl-table tbody tr td {
  padding: 12px 16px !important;
  vertical-align: middle !important;
}

table.table tbody tr,
.gl-table tbody tr {
  border-bottom: 1px solid var(--cm-border) !important;
  transition: background-color var(--cm-ease) !important;
}

table.table tbody tr:hover,
.gl-table tbody tr:hover {
  background-color: #f8fafc !important;
}

/* 스크롤바 */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: #c8d4e0; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── 로그인 페이지 ────────────────────────────────────────────── */
.login-page {
  background: linear-gradient(135deg, #071526 0%, #0d2040 55%, #163660 100%) !important;
  min-height: 100vh;
}

.login-page h1.gl-text-size-h2 {
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
}

/* description 영역 */
.login-page #js-custom-sign-in-description {
  color: rgba(255,255,255,0.72) !important;
}

.login-page #js-custom-sign-in-description h3 {
  color: rgba(255,255,255,0.38) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin: 28px 0 10px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.login-page #js-custom-sign-in-description ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.login-page #js-custom-sign-in-description li {
  color: rgba(255,255,255,0.75) !important;
  font-size: 13px !important;
  padding: 7px 0 7px 18px !important;
  position: relative !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

.login-page #js-custom-sign-in-description li::before {
  content: '›' !important;
  position: absolute !important;
  left: 3px !important;
  color: var(--cm-accent) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

.login-page #js-custom-sign-in-description strong {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.login-page #js-custom-sign-in-description p {
  color: rgba(255,255,255,0.45) !important;
  font-size: 12px !important;
  margin-top: 24px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}

/* 로그인 폼 카드 */
.login-page .bar {
  background: rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 14px !important;
  padding: 36px 32px !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.30) !important;
}

.login-page .gl-text-center img {
  max-height: 34px !important;
  width: auto !important;
}

/* 레이블 */
.login-page label,
.login-page .label-bold {
  color: rgba(255,255,255,0.82) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* 인풋 */
.login-page input[type="text"],
.login-page input[type="email"],
.login-page input[type="password"] {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  padding-left: 14px !important;
  transition: border-color var(--cm-ease), background var(--cm-ease) !important;
}

.login-page input[type="text"]:focus,
.login-page input[type="email"]:focus,
.login-page input[type="password"]:focus {
  background: rgba(255,255,255,0.11) !important;
  border-color: var(--cm-accent) !important;
  box-shadow: 0 0 0 3px rgba(59,158,221,0.18) !important;
  outline: none !important;
}

.login-page input::placeholder {
  color: rgba(255,255,255,0.28) !important;
}

/* 비밀번호 토글 버튼 */
.login-page .gl-field-error-anchor {
  position: relative !important;
  display: block !important;
}

.login-page .gl-field-error-anchor .gl-button {
  top: 4px !important;
  color: rgba(255,255,255,0.55) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 로그인 버튼 */
.login-page .btn-confirm,
.login-page .gl-button.btn-confirm {
  background: linear-gradient(160deg, #1565c0, #1e88e5) !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  padding: 11px !important;
  box-shadow: 0 2px 12px rgba(21,101,192,0.35) !important;
  transition: all var(--cm-ease) !important;
}

.login-page .btn-confirm:hover,
.login-page .gl-button.btn-confirm:hover {
  box-shadow: 0 4px 18px rgba(21,101,192,0.50) !important;
  transform: translateY(-1px) !important;
}

/* 패스키 버튼 */
.login-page .btn-default,
.login-page .gl-button.btn-default {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 8px !important;
  color: rgba(255,255,255,0.82) !important;
}

/* 링크 */
.login-page a:not(.btn) {
  color: var(--cm-accent) !important;
}

.login-page a:not(.btn):hover {
  color: #7ec8f5 !important;
}

.login-page .remember-me label {
  color: rgba(255,255,255,0.60) !important;
  font-size: 13px !important;
}

/* ── 멤버 목록 페이지 ─────────────────────────────────────────── */
/* 현재 유저 강조 행 배경 (라이트 배경 → 다크로) */
.member-form-control,
.js-toggle-container.is-expanded,
[data-qa-selector="member_row"],
.gl-table tr.is-current-user,
.gl-table tbody tr:has(.badge-info),
.members-list li,
.members-list .list-item,
.project-members-list li {
  background-color: transparent !important;
}

/* 멤버 row 전체 통일 */
.members-list,
.members-list li,
.members-list .list-item,
.project-members-list,
.project-members-list li {
  background: transparent !important;
  border-color: rgba(255,255,255,0.07) !important;
}

/* 멤버 카드 내 레이블 컬럼 배경 */
.member .list-label,
.member td:first-child,
.gl-table .member-overview-cell {
  background: transparent !important;
  color: var(--cm-text-muted) !important;
}

/* 멤버 row 배경 - 현재 유저 포함 전체 */
.member,
.member:hover,
.member.is-current-user,
.member[class*="current"] {
  background-color: transparent !important;
  background: transparent !important;
}

/* 구분선 */
.member + .member,
.members-list li + li {
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}

/* 멤버 이름/유저명 텍스트 */
.member .member-username,
.member .member-name {
  color: var(--cm-text) !important;
}

/* "바로 너" 뱃지 등 info badge */
.member .badge-info,
.member .gl-badge {
  background: rgba(59,158,221,0.15) !important;
  color: #6ea8d8 !important;
  border-color: rgba(59,158,221,0.25) !important;
}

/* 역할 셀렉트 배경 */
.member .member-form-control,
.member select {
  background-color: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: var(--cm-text) !important;
}

/* 만료일 input */
.member .form-control,
.member input[type="text"] {
  background-color: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: var(--cm-text) !important;
}

/* 활동 텍스트 */
.member .last-seen-at,
.member .member-activity-info {
  color: var(--cm-text-muted) !important;
}

/* ================================================================
   Super-Sidebar 호버 액션·파란 인디케이터 제거  v3-safe  2026-04-30
================================================================ */

/* 1) 호버 시 나타나는 액션 자식 (핀/더보기) — opacity로 숨김, 레이아웃 보존 */
.super-sidebar .show-on-focus-or-hover--target,
.super-sidebar [class*="show-on-focus-or-hover--target"] {
  opacity: 0 !important;
  pointer-events: none !important;
}
.super-sidebar .show-on-focus-or-hover--control:hover .show-on-focus-or-hover--target,
.super-sidebar .show-on-focus-or-hover--control:focus-within .show-on-focus-or-hover--target {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* 2) 핀/언핀/더보기 버튼 명시 차단 */
.super-sidebar [data-testid="pin-button"],
.super-sidebar [data-testid="unpin-button"],
.super-sidebar [data-testid="nav-item-link-pin-button"],
.super-sidebar [data-testid="nav-item-link-unpin-button"],
.super-sidebar [data-testid*="more-actions"],
.super-sidebar button[aria-label*="고정"],
.super-sidebar button[aria-label*="Pin"],
.super-sidebar button[aria-label*="Unpin"],
.super-sidebar button[aria-label*="옵션"],
.super-sidebar button[aria-label*="Options"] {
  display: none !important;
}

/* 3) 파란 background/border → transparent */
.super-sidebar .gl-bg-blue-100,
.super-sidebar .gl-bg-blue-200,
.super-sidebar .gl-bg-blue-500,
.super-sidebar [class*="bg-blue-"] {
  background-color: transparent !important;
}
.super-sidebar [class*="border-blue-"],
.super-sidebar [class*="border-b-blue"],
.super-sidebar [class*="border-l-blue"] {
  border-color: transparent !important;
}
.super-sidebar-nav-item::before,
.super-sidebar-nav-item::after,
.super-sidebar-nav-item-current::before,
.super-sidebar-nav-item-current::after {
  background-color: transparent !important;
  border-color: transparent !important;
  content: none !important;
}

/* nav-item-link-badge — gl-min-w-6 로 인해 빈 badge가 파란 라인처럼 보이는 현상 차단 */
.super-sidebar .nav-item-link-badge {
  min-width: 0 !important;
  background: transparent !important;
  border: none !important;
}
.super-sidebar .nav-item-link-badge:empty {
  display: none !important;
}