/* ============================================================
   Safety Log — Dark Theme
   Design system: work_list.php 테마와 동일한 색상 변수 사용
   ============================================================ */

/* ── 디자인 토큰 ─────────────────────────────────────────── */
:root {
  --bg:       #0c1420;
  --bg2:      #111d2e;
  --bg3:      #162033;
  --border:   rgba(255, 255, 255, 0.07);
  --border2:  rgba(255, 255, 255, 0.12);
  --text:     #c5d8eb;
  --text-dim: #5d7a96;
  --text-hi:  #e8f2fc;
  --accent:   #e8920a;
  --accent2:  #f5a623;
  --blue:     #3a7fc1;
  --green:    #36b37e;
  --red:      #d64541;
}

/* ── Bootstrap 5.3 다크모드 변수 오버라이드 ──────────────── */
[data-bs-theme="dark"] {
  --bs-body-font-family: "Malgun Gothic", "맑은 고딕", sans-serif;
  --bs-body-bg:           #0c1420;
  --bs-body-bg-rgb:       12, 20, 32;
  --bs-body-color:        #c5d8eb;
  --bs-body-color-rgb:    197, 216, 235;
  --bs-emphasis-color:    #e8f2fc;
  --bs-secondary-color:   rgba(197, 216, 235, 0.55);
  --bs-secondary-bg:      #111d2e;
  --bs-tertiary-bg:       #162033;
  --bs-border-color:              rgba(255, 255, 255, 0.07);
  --bs-border-color-translucent:  rgba(255, 255, 255, 0.12);
  --bs-link-color:        #f5a623;
  --bs-link-hover-color:  #ffd089;
  --bs-link-color-rgb:    245, 166, 35;

  /* Primary → accent orange */
  --bs-primary:                  #e8920a;
  --bs-primary-rgb:              232, 146, 10;
  --bs-primary-text-emphasis:    #f5a623;
  --bs-primary-bg-subtle:        rgba(232, 146, 10, 0.15);
  --bs-primary-border-subtle:    rgba(232, 146, 10, 0.35);

  /* Cards */
  --bs-card-bg:            #111d2e;
  --bs-card-border-color:  rgba(255, 255, 255, 0.07);
  --bs-card-cap-bg:        rgba(255, 255, 255, 0.03);
  --bs-card-color:         #c5d8eb;

  /* Tables */
  --bs-table-bg:            transparent;
  --bs-table-border-color:  rgba(255, 255, 255, 0.07);
  --bs-table-striped-bg:    rgba(255, 255, 255, 0.02);
  --bs-table-striped-color: #c5d8eb;
  --bs-table-hover-bg:      rgba(255, 255, 255, 0.03);
  --bs-table-hover-color:   #e8f2fc;
  --bs-table-active-bg:     rgba(255, 255, 255, 0.05);

  /* Pagination */
  --bs-pagination-bg:                   rgba(255, 255, 255, 0.05);
  --bs-pagination-border-color:         rgba(255, 255, 255, 0.12);
  --bs-pagination-color:                #c5d8eb;
  --bs-pagination-active-bg:            #e8920a;
  --bs-pagination-active-color:         #fff;
  --bs-pagination-active-border-color:  #e8920a;
  --bs-pagination-hover-bg:             rgba(255, 255, 255, 0.12);
  --bs-pagination-hover-color:          #e8f2fc;
  --bs-pagination-hover-border-color:   rgba(255, 255, 255, 0.2);
  --bs-pagination-disabled-color:       rgba(197, 216, 235, 0.3);
  --bs-pagination-disabled-bg:          rgba(255, 255, 255, 0.03);
  --bs-pagination-disabled-border-color:rgba(255, 255, 255, 0.07);
}

/* ── 전체 기반 ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: "Malgun Gothic", "맑은 고딕", sans-serif !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  min-height: 100vh;
  padding-bottom: 48px;
}

/* ── 상단 네비게이션 바 ───────────────────────────────────── */
.sl-topbar {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
}

.sl-topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  gap: 16px;
  flex-wrap: wrap;
}

.sl-brand-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 3px;
}

.sl-brand-title {
  font-size: 18px;
  font-weight: 900;
  color: var(--text-hi);
  line-height: 1.2;
  text-decoration: none;
}

.sl-brand-title span { color: var(--accent2); }

.sl-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}

.sl-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 9px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.sl-nav-link:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-hi);
  border-color: var(--border2);
}

.sl-nav-link.is-active {
  background: rgba(232, 146, 10, 0.15);
  color: var(--accent2);
  border-color: rgba(232, 146, 10, 0.35);
}

/* 모바일: 네비 펼치기 */
.sl-nav-toggle {
  display: none;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--border2);
  color: var(--text);
  border-radius: 9px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

@media (max-width: 767px) {
  .sl-topbar-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sl-nav-toggle { display: block; align-self: flex-end; margin-top: -38px; }
  .sl-nav { display: none; width: 100%; flex-direction: column; gap: 4px; }
  .sl-nav.is-open { display: flex; }
  .sl-nav-link { width: 100%; }
}

/* ── 버튼 ─────────────────────────────────────────────────── */
.btn { border-radius: 9px !important; font-weight: 600 !important; }

.btn-primary {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus-visible {
  background-color: var(--accent2) !important;
  border-color: var(--accent2) !important;
  color: #fff !important;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: var(--border2) !important;
  color: var(--text) !important;
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--text-hi) !important;
}

.btn-warning {
  background: rgba(245, 166, 35, 0.18) !important;
  border-color: rgba(245, 166, 35, 0.4) !important;
  color: #ffd28b !important;
}
.btn-warning:hover {
  background: rgba(245, 166, 35, 0.28) !important;
}

.btn-danger {
  background: rgba(214, 69, 65, 0.18) !important;
  border-color: rgba(214, 69, 65, 0.45) !important;
  color: #ffd8d6 !important;
}
.btn-danger:hover {
  background: rgba(214, 69, 65, 0.28) !important;
}

.btn-success {
  background: rgba(54, 179, 126, 0.18) !important;
  border-color: rgba(54, 179, 126, 0.4) !important;
  color: #99efc3 !important;
}
.btn-success:hover {
  background: rgba(54, 179, 126, 0.28) !important;
}

.btn-info.text-white,
.btn-info {
  background: rgba(58, 127, 193, 0.2) !important;
  border-color: rgba(58, 127, 193, 0.4) !important;
  color: #a8d0f5 !important;
}

.btn-outline-primary {
  border-color: rgba(232, 146, 10, 0.5) !important;
  color: var(--accent2) !important;
}
.btn-outline-primary:hover {
  background: rgba(232, 146, 10, 0.15) !important;
  color: var(--accent2) !important;
  border-color: rgba(232, 146, 10, 0.5) !important;
}

.btn-outline-secondary, .btn-outline-dark {
  border-color: var(--border2) !important;
  color: var(--text) !important;
}
.btn-outline-secondary:hover, .btn-outline-dark:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  color: var(--text-hi) !important;
  border-color: var(--border2) !important;
}

.btn-outline-danger {
  border-color: rgba(214, 69, 65, 0.45) !important;
  color: #ffd8d6 !important;
}
.btn-outline-danger:hover {
  background: rgba(214, 69, 65, 0.18) !important;
  color: #ffd8d6 !important;
  border-color: rgba(214, 69, 65, 0.45) !important;
}

.btn-outline-success {
  border-color: rgba(54, 179, 126, 0.4) !important;
  color: #99efc3 !important;
}
.btn-outline-success:hover {
  background: rgba(54, 179, 126, 0.18) !important;
  color: #99efc3 !important;
  border-color: rgba(54, 179, 126, 0.4) !important;
}

/* ── 카드 ─────────────────────────────────────────────────── */
.card {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
.card-header {
  background: rgba(255, 255, 255, 0.03) !important;
  border-bottom-color: var(--border) !important;
  color: var(--text-dim) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
.card-body { color: var(--text) !important; }

/* ── 테이블 ───────────────────────────────────────────────── */
.table { color: var(--text) !important; }

.table-dark thead th,
.table thead.table-dark th {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--text-dim) !important;
  border-color: var(--border2) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

.table-light thead th,
thead.table-light th {
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--text-dim) !important;
  border-color: var(--border) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

.table td, .table th {
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.table-hover tbody tr:hover td {
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--text-hi) !important;
}

.table-bordered,
.table-bordered td,
.table-bordered th { border-color: var(--border) !important; }

.table-striped tbody tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: rgba(255, 255, 255, 0.015);
}

/* ── 폼 ──────────────────────────────────────────────────── */
.form-control,
.form-select {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--border2) !important;
  color: var(--text-hi) !important;
  border-radius: 9px !important;
}
.form-control:focus,
.form-select:focus {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(245, 166, 35, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.12) !important;
  color: var(--text-hi) !important;
}
.form-control::placeholder { color: var(--text-dim) !important; }

.form-label {
  color: var(--text-dim) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
}

.form-control-plaintext {
  color: var(--text) !important;
}

.form-text {
  color: var(--text-dim) !important;
  font-size: 12px !important;
}

/* ── 알림 ─────────────────────────────────────────────────── */
.alert-success {
  background: rgba(54, 179, 126, 0.12) !important;
  border-color: rgba(54, 179, 126, 0.35) !important;
  color: #99efc3 !important;
}
.alert-danger {
  background: rgba(214, 69, 65, 0.12) !important;
  border-color: rgba(214, 69, 65, 0.35) !important;
  color: #ffd3d1 !important;
}
.alert-warning {
  background: rgba(245, 166, 35, 0.12) !important;
  border-color: rgba(245, 166, 35, 0.35) !important;
  color: #ffd28b !important;
}

/* 닫기 버튼 (다크 배경에서 보이도록) */
.btn-close { filter: invert(1) grayscale(1) brightness(2) !important; }

/* ── 뱃지 ─────────────────────────────────────────────────── */
.badge.bg-primary    { background-color: var(--accent) !important; }
.badge.bg-success    { background: rgba(54, 179, 126, 0.25) !important; color: #99efc3 !important; }
.badge.rounded-pill  { border-radius: 999px !important; }
.badge.bg-dark       { background: rgba(255,255,255,0.1) !important; color: var(--text) !important; }

/* ── 페이지네이션 ──────────────────────────────────────────── */
.page-link {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--border2) !important;
  color: var(--text) !important;
  border-radius: 8px !important;
}
.page-link:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--text-hi) !important;
}
.page-item.active .page-link {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.page-item.disabled .page-link {
  background: rgba(255, 255, 255, 0.02) !important;
  color: var(--text-dim) !important;
  opacity: 0.5 !important;
}

/* ── 리스트 그룹 ───────────────────────────────────────────── */
.list-group-item {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ── 타이포그래피 ──────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { color: var(--text-hi); }

.text-muted      { color: var(--text-dim) !important; }
.text-muted.small { font-size: 12px !important; }

.display-4, .display-6 { color: var(--text-hi) !important; }

/* ── 유틸 ─────────────────────────────────────────────────── */
.border          { border-color: var(--border) !important; }
.border-top      { border-top-color: var(--border) !important; }
.bg-light        { background: var(--bg3) !important; }
.shadow-sm       { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important; }
.rounded         { border-radius: 12px !important; }
.img-thumbnail {
  background: var(--bg3) !important;
  border-color: var(--border2) !important;
}

/* ── 푸터 ─────────────────────────────────────────────────── */
.sl-footer {
  border-top: 1px solid var(--border);
  padding: 16px 20px;
  margin-top: 40px;
}
.sl-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.sl-footer span {
  font-size: 12px;
  color: var(--text-dim);
}

/* ── 인쇄 ─────────────────────────────────────────────────── */
@media print {
  body     { background: white !important; color: #000 !important; padding: 0 !important; }
  .sl-topbar, .sl-footer { display: none !important; }
  .card    { background: white !important; border: 1px solid #ccc !important; border-radius: 0 !important; }
  .table   { color: #000 !important; }
  .table td, .table th { border-color: #ccc !important; color: #000 !important; }
  .btn     { display: none !important; }
}