.rounded-xl {
  border-radius: 1rem;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chip {
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px solid #dee2e6;
  font-size: .75rem;
}

/* Regulator-specific chip coloring for quick visual scan */
.chip-reg-FSC {
  background: #e7f5ff;
  border-color: #74c0fc;
  color: #0b7285;
}

.chip-reg-FSS {
  background: #fff0f6;
  border-color: #f783ac;
  color: #a61e4d;
}

.chip-reg-KRX {
  background: #f8f9fa;
  border-color: #adb5bd;
  color: #343a40;
}

.chip-reg-KOFIU {
  background: #f3f0ff;
  border-color: #9775fa;
  color: #5f3dc4;
}

.bar {
  height: 8px;
  background: #f1f3f5;
  border-radius: 9999px;
  overflow: hidden;
}

.bar>span {
  display: block;
  height: 100%;
  background: #212529;
}

.nav-pill:hover {
  background: #f8f9fa;
}

/* Make modal content scrollable on mobile */
#modal-html {
  max-height: 70vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 576px) {
  #modal-html {
    max-height: 60vh;
  }
}

#modal-body-scroll {
  position: relative;
}

@media (max-width: 576px) {
  #modal-body-scroll.collapsed #modal-html {
    max-height: 45vh;
  }

  #modal-body-scroll.collapsed::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.85));
    pointer-events: none;
    border-radius: 0 0 .75rem .75rem;
  }
}

.filter-today-label {
  white-space: nowrap;
}

/* Pagination styling */
#feed-pager .page-link {
  color: #212529;
  border-color: #dee2e6;
  padding: .25rem .6rem;
  border-radius: .375rem;
}

#feed-pager .page-link:hover {
  background-color: #f8f9fa;
  color: #212529;
}

#feed-pager .page-item.active .page-link {
  background-color: #212529;
  border-color: #212529;
  color: #fff;
}

#feed-pager .page-item.disabled .page-link {
  color: #adb5bd;
  background-color: #f8f9fa;
}

.crawl-status-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 10px;
  height: 10px;
  border-radius: 9999px;
}

.crawl-status-ok {
  background: #2fb344;
}

.crawl-status-fail {
  background: #fa5252;
}

.crawl-status-unknown {
  background: #ced4da;
}

/* "Updated today" label on feed cards */
.badge-today {
  background: #fff3bf;
  border-radius: 9999px;
  border: 1px solid #ffe066;
  color: #856404;
  font-size: .7rem;
  padding: 2px 8px;
  white-space: nowrap;
}

/* Theme (light/dark) */
html[data-theme="dark"] body {
  background-color: #121212;
  color: #f8f9fa;
}

html[data-theme="dark"] .border {
  border-color: #343a40 !important;
}

html[data-theme="dark"] .bg-white {
  background-color: #1e1e1e !important;
}

html[data-theme="dark"] .bg-light {
  background-color: #121212 !important;
}

html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-top {
  border-color: #343a40 !important;
}

html[data-theme="dark"] .text-muted {
  color: #ced4da !important;
}

html[data-theme="dark"] #visitor-count {
  color: #868e96 !important;
}

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .link-dark {
  color: #f8f9fa !important;
}

html[data-theme="dark"] .link-secondary {
  color: #ced4da !important;
}

html[data-theme="dark"] .chip {
  background-color: #1e1e1e;
  border-color: #495057;
  color: #f8f9fa;
}

/* Preserve source-specific chip colors in dark mode */
html[data-theme="dark"] .chip-reg-FSC {
  background: #e7f5ff;
  border-color: #74c0fc;
  color: #0b7285;
}

html[data-theme="dark"] .chip-reg-FSS {
  background: #fff0f6;
  border-color: #f783ac;
  color: #a61e4d;
}

html[data-theme="dark"] .chip-reg-KRX {
  background: #f8f9fa;
  border-color: #adb5bd;
  color: #343a40;
}

html[data-theme="dark"] .chip-reg-KOFIU {
  background: #f3f0ff;
  border-color: #9775fa;
  color: #5f3dc4;
}

html[data-theme="dark"] .badge-today {
  background: #fff3bf1a;
  border-color: #ffe066;
  color: #ffe066;
}

/* Digest banner */
#digest-banner {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1040;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
}

html[data-theme="dark"] #digest-banner {
  background: rgba(0, 0, 0, 0.92);
  border-bottom-color: #343a40;
}

html[data-theme="dark"] header.sticky-top {
  background-color: #1e1e1e !important;
  border-color: #343a40 !important;
}

html[data-theme="dark"] section {
  background-color: #121212;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
  background-color: #1e1e1e;
  color: #f8f9fa;
  border-color: #495057;
}

html[data-theme="dark"] .form-control::placeholder {
  color: #868e96;
}

/* Improve visibility of native date-picker icon in dark mode */
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.6);
  opacity: 1;
}

html[data-theme="dark"] .input-group-text {
  background-color: #1e1e1e;
  color: #f8f9fa;
  border-color: #495057;
}

html[data-theme="dark"] .btn-primary {
  background-color: #4dabf7;
  border-color: #4dabf7;
}

html[data-theme="dark"] .btn-outline-secondary {
  color: #f1f3f5;
  border-color: #868e96;
}

html[data-theme="dark"] .modal-content {
  background-color: #1e1e1e;
  color: #f8f9fa;
}

/* Ensure scraped detail HTML doesn't show bright white blocks in dark mode */
html[data-theme="dark"] #modal-html,
html[data-theme="dark"] #modal-html table,
html[data-theme="dark"] #modal-html td,
html[data-theme="dark"] #modal-html th {
  background-color: transparent !important;
}

/* Make scraped detail text readable in dark mode even if inline styles set dark colors */
html[data-theme="dark"] #modal-html {
  color: #f8f9fa;
}

html[data-theme="dark"] #modal-html * {
  color: #f8f9fa !important;
  border-color: #495057 !important;
}

html[data-theme="dark"] #modal-html a {
  color: #4dabf7 !important;
}

html[data-theme="dark"] footer {
  background-color: #1e1e1e;
}

.btn-theme-toggle {
  width: 56px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  background: transparent;
}

.theme-toggle-track {
  position: relative;
  width: 100%;
  height: 22px;
  border-radius: 9999px;
  background: #f1f3f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
  font-size: 12px;
  color: #868e96;
  transition: background .2s ease, color .2s ease;
}

.theme-toggle-icon {
  pointer-events: none;
}

.theme-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  transition: transform .22s ease;
}

#theme-toggle[data-theme="dark"] .theme-toggle-track {
  background: #343a40;
  color: #f1f3f5;
}

#theme-toggle[data-theme="dark"] .theme-toggle-thumb {
  transform: translateX(24px);
}

/* Dark mode tweaks for pagination */
html[data-theme="dark"] #feed-pager .page-link {
  background-color: #1e1e1e;
  border-color: #495057;
  color: #f8f9fa;
}

html[data-theme="dark"] #feed-pager .page-link:hover {
  background-color: #343a40;
  color: #f8f9fa;
}

html[data-theme="dark"] #feed-pager .page-item.active .page-link {
  background-color: #495057;
  border-color: #495057;
  color: #ffffff;
}

html[data-theme="dark"] #feed-pager .page-item.disabled .page-link {
  background-color: #1e1e1e;
  color: #868e96;
  border-color: #343a40;
}

@media (max-width: 576px) {
  header .container.header-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }

  nav.top-nav-actions {
    width: 100%;
    justify-content: flex-end;
  }
}