/* =========================================================================
   QR Code Manager — Park Systems theme (app.css)
   parksystems.com 스타일: 흰 헤더 · 네이비(#003a82) · 시안 포인트(#00aee6) ·
   미니멀 기업형. Bootstrap 위에 얹는 오버라이드 레이어이며 템플릿 마크업의
   기존 클래스(.navbar/.card/.table/.btn)와 폼 위젯을 전역 재스타일한다.
   ========================================================================= */

:root {
  /* Park Systems 로고 색상 */
  --brand-900: #002a5e;   /* hover/딥 네이비 */
  --brand-800: #003a82;   /* PRIMARY 네이비 */
  --brand-700: #004a9f;
  --accent:    #00aee6;   /* 시안 포인트 */
  --accent-600:#0098c9;
  --accent-050:#e7f6fd;

  --ink-900: #1a1e24;
  --ink-700: #3c424a;
  --ink-500: #6b7280;
  --ink-400: #9aa1aa;
  --line:    #e6e8eb;
  --line-2:  #d6dae0;
  --surface: #ffffff;
  --surface-2: #f5f6f8;

  --danger-600: #d0342c;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-md: 0 2px 6px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .05);
  --shadow-nav: 0 1px 0 rgba(16, 24, 40, .04), 0 6px 20px rgba(16, 24, 40, .05);
  --radius: 8px;
  --radius-sm: 5px;
}

/* ----------------------------- base ------------------------------------ */
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink-700);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic",
               "맑은 고딕", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--surface-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ----------------------------- navbar (흰 헤더) ------------------------- */
.navbar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-nav);
  padding-top: .55rem;
  padding-bottom: .55rem;
}
.navbar .navbar-brand {
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--brand-800) !important;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
/* 로고 마크: 네이비→시안 칩 위에 흰 QR 아이콘 */
.navbar .brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--brand-800), var(--accent));
  box-shadow: 0 2px 8px rgba(0, 58, 130, .28);
}
.navbar .brand-mark img { width: 20px; height: 20px; }
/* 왼쪽 브랜드: 실제 Park Systems 로고 + 앱 이름 */
.navbar .brand-park { height: 34px; width: auto; }
.navbar .brand-name {
  font-weight: 700;
  color: var(--brand-800);
  padding-left: .75rem;
  border-left: 1px solid var(--line-2);
}
@media (max-width: 480px) {
  /* 아주 좁은 화면에선 앱 이름 생략, 로고만 표시 */
  .navbar .brand-name { display: none; }
}

.navbar .nav-link {
  color: var(--ink-700) !important;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .4rem .7rem !important;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  transition: color .15s ease, border-color .15s ease;
}
.navbar .nav-link:hover {
  color: var(--brand-800) !important;
  border-bottom-color: var(--accent);
}
/* index_login 의 "QR Code |" / "Probe |" 그룹 구분 라벨 */
.navbar .nav-link strong {
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--brand-800);
}

/* ----------------------------- layout ---------------------------------- */
.wrap_content { margin-top: 40px !important; }
#content.container { padding-bottom: 64px; }

/* 섹션 소제목으로 쓰인 <strong> 강조 */
#content strong { color: var(--brand-800); font-weight: 700; }
.table td strong { color: inherit; }   /* 표 안 강조 텍스트는 톤 유지 */

/* ----------------------------- cards ----------------------------------- */
.card {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-md);
  background: var(--surface) !important;
}
.card.bg-light { background: var(--surface) !important; }

/* ----------------------------- buttons --------------------------------- */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
  letter-spacing: .1px;
  padding: .5rem 1.2rem;
  transition: background-color .15s ease, box-shadow .18s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  border: 1px solid var(--brand-800);
  background: var(--brand-800);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--brand-900);
  border-color: var(--brand-900);
  box-shadow: 0 6px 16px rgba(0, 58, 130, .25);
}
/* 보조 강조(시안) 버튼이 필요할 때 */
.btn-info {
  border: 1px solid var(--accent);
  color: #fff;
  background: var(--accent);
}
.btn-info:hover { color: #fff; background: var(--accent-600); border-color: var(--accent-600); }

.btn:focus-visible {
  outline: 3px solid var(--accent-050);
  outline-offset: 1px;
}

/* bootstrap-select 드롭다운 버튼 톤 맞춤 */
.bootstrap-select .btn.dropdown-toggle {
  background: var(--surface);
  border: 1px solid var(--line-2);
  color: var(--ink-700);
  box-shadow: none;
  border-radius: var(--radius-sm);
}
.bootstrap-select .btn.dropdown-toggle:hover { border-color: var(--accent); }

/* ----------------------------- forms ----------------------------------- */
#content input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=file]):not([type=reset]),
#content select:not(.selectpicker),
#content textarea {
  width: 100%;
  max-width: 100%;
  color: var(--ink-900);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: .5rem .75rem;
  font-size: .95rem;
  line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#content input:focus:not([type=radio]):not([type=checkbox]),
#content select:not(.selectpicker):focus,
#content textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 174, 230, .18);
}
#content textarea { min-height: 120px; resize: vertical; }

#content input[type=date] { width: auto; min-width: 160px; display: inline-block; }
#content input[type=number] { max-width: 220px; }

/* file input */
#content input[type=file] {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px dashed var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-050);
  color: var(--ink-700);
  cursor: pointer;
}
#content input[type=file]::file-selector-button {
  border: none;
  margin-right: .75rem;
  padding: .4rem .85rem;
  border-radius: 4px;
  font-weight: 600;
  color: #fff;
  background: var(--brand-800);
  cursor: pointer;
}

/* radio / checkbox */
#content input[type=radio],
#content input[type=checkbox] { accent-color: var(--brand-800); transform: scale(1.05); margin-right: .35rem; }
#content label { color: var(--ink-700); }

/* ----------------------------- tables ---------------------------------- */
.table {
  --bs-table-bg: transparent;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
  color: var(--ink-700);
}
.table td,
.table th {
  border: none;
  border-bottom: 1px solid var(--line);
  padding: .7rem .95rem;
  vertical-align: middle;
}
.table tr:last-child td { border-bottom: none; }

/* zebra */
.table-striped > tbody > tr:nth-of-type(odd) > *,
.table-striped > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: transparent;
  background: var(--surface-2);
}
.table tbody tr:hover > *,
.table > tr:hover > * { background: rgba(0, 174, 230, .06); }

.table td:first-child { color: var(--ink-900); font-weight: 500; }

#content [style*="color:red"],
#content [style*="color: red"] { color: var(--danger-600) !important; }

/* ----------------------------- links ----------------------------------- */
#content a:not(.btn):not(.nav-link) {
  color: var(--brand-800);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
#content a:not(.btn):not(.nav-link):hover {
  color: var(--accent-600);
  border-bottom-color: var(--accent);
}

/* CSV export 링크 → 시안 톤 pill */
#content a[href$="export/csv"] {
  display: inline-block;
  margin: 10px 0 6px;
  padding: .45rem .95rem;
  border-radius: var(--radius-sm);
  background: var(--accent-050);
  color: var(--accent-600) !important;
  border: 1px solid #b7e6f7;
  font-weight: 600;
}
#content a[href$="export/csv"]:hover { background: #d5eefb; border-bottom-color: #b7e6f7; }

/* ----------------------------- images ---------------------------------- */
#content img[src]:not([class]) {
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  max-width: 100%;
  height: auto;
}

/* ----------------------------- footer ---------------------------------- */
.app-footer {
  border-top: 1px solid var(--line);
  color: var(--ink-400);
  font-size: .82rem;
  text-align: center;
  padding: 22px 12px 34px;
  margin-top: 10px;
  background: var(--surface);
}
.app-footer strong { color: var(--brand-800); }

/* ----------------------------- responsive ------------------------------ */
@media (max-width: 640px) {
  .wrap_content { margin-top: 22px !important; }
  .table td, .table th { padding: .55rem .6rem; font-size: .9rem; }
  .btn { padding: .5rem .9rem; }
  .navbar .nav-link { text-transform: none; }
}