/* Periodic Table Website Styles (Bootstrap 5 + Typst CeTZ Theme) */

:root {
  --pt-page-bg: #f8f9fa;
  --pt-card-bg: #ffffff;
  --pt-card-border: #e9ecef;
  --pt-text-main: #212529;
  --pt-text-muted: #6c757d;
  --pt-hdr-bg: #e9ecef;
  --pt-hdr-text: #343a40;
  --pt-hdr-hover-bg: #212529;
  --pt-hdr-hover-text: #ffffff;
  --pt-table-bg: #ffffff;
  --pt-table-border: #dee2e6;
  --pt-input-bg: #ffffff;
  --pt-input-border: #ced4da;
  --pt-input-group-addon-bg: #e9ecef;
  --pt-callout-hover-bg: #fff3cd;
  --pt-text-dark: #231f20;
}

[data-bs-theme="dark"],
body.pt-dark-theme {
  --pt-page-bg: #14161a;
  --pt-card-bg: #1c2026;
  --pt-card-border: #2b313c;
  --pt-text-main: #f1f3f5;
  --pt-text-muted: #9aa5b1;
  --pt-hdr-bg: #252a34;
  --pt-hdr-text: #e9ecef;
  --pt-hdr-hover-bg: #f8f9fa;
  --pt-hdr-hover-text: #14161a;
  --pt-table-bg: #1c2026;
  --pt-table-border: #323846;
  --pt-input-bg: #252a34;
  --pt-input-border: #3b4252;
  --pt-input-group-addon-bg: #20242d;
  --pt-callout-hover-bg: #323946;
  --pt-text-dark: #f1f3f5;
}

body {
  font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background-color: var(--pt-page-bg) !important;
  color: var(--pt-text-main);
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Make Quarto full-width container use maximum horizontal space with zero unwanted scroll */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

.quarto-container,
.page-columns,
main.content,
#quarto-content {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#quarto-content > * {
  padding-top: 0.25rem;
}

.pt-top-panel,
.pt-toolbar-card,
.pt-footer-card,
.card {
  background-color: var(--pt-card-bg) !important;
  border-color: var(--pt-card-border) !important;
  color: var(--pt-text-main) !important;
}

.pt-sample-wrapper {
  max-width: 100%;
}

/* Scroll wrapper */
.pt-scroll-wrapper {
  width: 100%;
  max-width: 100%;
  padding-bottom: 0.35rem;
  container-type: inline-size;
  container-name: ptgrid;
}

/* Default (Fit Screen): strictly fit within viewport width with NO horizontal scrollbar */
.pt-scroll-wrapper:not(.pt-scroll-mode) {
  overflow-x: hidden !important;
  overflow-y: hidden;
}

/* Scrollable mode: user explicitly requested horizontal scroll bar */
.pt-scroll-wrapper.pt-scroll-mode {
  overflow-x: auto !important;
  overflow-y: hidden;
}

/* 19 columns: Col 1 = Period header, Cols 2..19 = Groups 1..18 */
.pt-grid {
  display: grid;
  align-items: stretch;
  gap: clamp(1px, 0.28cqw, 4px);
  grid-template-rows: auto repeat(7, 1fr) clamp(4px, 0.8cqw, 14px) repeat(2, 1fr);
  transition: width 0.15s ease;
}

/* Fit Screen: strictly 100% width with min-width: 0 */
.pt-grid:not(.pt-scroll-mode) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: minmax(14px, 1.8fr) repeat(18, minmax(0, 5.45fr));
}

/* Scrollable mode: full width with min-width 1540px */
.pt-grid.pt-scroll-mode {
  width: max-content !important;
  min-width: 1540px !important;
  grid-template-columns: 28px repeat(18, 84px);
}

/* Compact mode */
.pt-grid.pt-compact-mode:not(.pt-scroll-mode) {
  grid-template-columns: minmax(14px, 1.6fr) repeat(18, minmax(0, 5.46fr));
}
.pt-grid.pt-compact-mode.pt-scroll-mode {
  grid-template-columns: 24px repeat(18, 80px);
}

/* Axis corner & Group / Period headers */
.pt-axis-corner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: clamp(0.42rem, 0.6cqw, 0.65rem);
  font-weight: 700;
  color: var(--pt-text-muted);
  line-height: 1.1;
  user-select: none;
}

.pt-group-hdr,
.pt-period-hdr,
.pt-fblock-hdr {
  border: 1px solid transparent;
  background-color: var(--pt-hdr-bg);
  color: var(--pt-hdr-text);
  border-radius: clamp(2px, 0.35cqw, 6px);
  font-size: clamp(0.5rem, 0.76cqw, 0.82rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 1px 2px;
  transition: all 0.15s ease;
}

.pt-group-hdr:hover,
.pt-period-hdr:hover,
.pt-fblock-hdr:hover,
.pt-group-hdr.active,
.pt-period-hdr.active {
  background-color: var(--pt-hdr-hover-bg);
  color: var(--pt-hdr-hover-text);
  transform: translateY(-1px);
}

.pt-group-roman {
  font-size: clamp(0.42rem, 0.65cqw, 0.7rem);
  opacity: 0.85;
}

.pt-period-hdr {
  font-size: clamp(0.55rem, 0.88cqw, 0.95rem);
  font-weight: 700;
}

.pt-fblock-hdr {
  justify-content: flex-end;
  padding-right: clamp(4px, 0.8cqw, 12px);
  font-size: clamp(0.5rem, 0.78cqw, 0.84rem);
}

/* Element Card matching periodic-table.typ */
.pt-cell {
  /* Crucial: allow cell to shrink down to zero without forcing column min-content */
  min-width: 0 !important;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;

  border: clamp(1px, 0.15cqw, 2px) solid var(--cell-stroke, var(--cat-stroke, #00739e));
  background-color: var(--cell-fill, var(--cat-fill, #eaf3f9));
  color: var(--cell-text, var(--pt-text-dark));
  border-radius: clamp(2px, 0.4cqw, 8px);
  padding: clamp(1px, 0.28cqw, 4px) clamp(1px, 0.25cqw, 4px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: transform 0.14s ease, box-shadow 0.14s ease, opacity 0.18s ease, filter 0.18s ease;
  line-height: 1.05;
  min-height: clamp(34px, 5.5cqw, 92px);
  aspect-ratio: 1 / 1.05;
}

[data-bs-theme="dark"] .pt-cell,
body.pt-dark-theme .pt-cell {
  --cell-stroke: var(--cat-stroke-dark, var(--cat-stroke));
  --cell-fill: var(--cat-fill-dark, var(--cat-fill));
  --cell-text: #f1f3f5;
}

.pt-cell:hover,
.pt-cell:focus-visible {
  transform: scale(1.07);
  z-index: 15;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  outline: none;
}

.pt-placeholder {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.pt-placeholder .pt-row-top {
  width: 100%;
}

/* Top & middle data rows inside element card */
.pt-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1px;
  font-size: clamp(0.33rem, 0.52cqw, 0.64rem);
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden;
  line-height: 1.05;
}

.pt-z {
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  white-space: nowrap;
  font-size: clamp(0.40rem, 0.62cqw, 0.72rem);
  min-width: 0;
  overflow: hidden;
}

.pt-phase-icon,
.pt-marker-icon {
  font-size: clamp(0.38rem, 0.55cqw, 0.65rem);
  line-height: 1;
}

.pt-ox {
  font-size: clamp(0.30rem, 0.46cqw, 0.58rem);
  text-align: right;
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 58%;
}

.pt-mass,
.pt-ion,
.pt-rad,
.pt-aff {
  font-weight: 600;
  font-size: clamp(0.32rem, 0.48cqw, 0.62rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.pt-sym {
  font-size: clamp(0.68rem, 1.3cqw, 1.35rem);
  font-weight: 800;
  text-align: center;
  line-height: 1.05;
  margin: 1px 0;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}

.pt-name {
  font-size: clamp(0.36rem, 0.58cqw, 0.72rem);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.05;
  min-width: 0;
}

.pt-conf {
  font-size: clamp(0.30rem, 0.46cqw, 0.58rem);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  color: #343a40;
}

[data-bs-theme="dark"] .pt-conf,
body.pt-dark-theme .pt-conf {
  color: #dee2e6;
}

.pt-conf sup {
  font-size: 0.72em;
}

.pt-heatmap-val {
  display: none;
  font-size: clamp(0.36rem, 0.5cqw, 0.62rem);
  font-weight: 700;
  text-align: center;
  background: rgba(255, 255, 255, 0.82);
  color: #212529;
  border-radius: 3px;
  margin-top: 1px;
  padding: 0 2px;
}

[data-bs-theme="dark"] .pt-heatmap-val,
body.pt-dark-theme .pt-heatmap-val {
  background: rgba(0, 0, 0, 0.65);
  color: #f8f9fa;
}

.pt-grid[data-color-mode="atomic_radius_angstrom"] .pt-heatmap-val,
.pt-grid[data-color-mode="ionization_energy_ev"] .pt-heatmap-val,
.pt-grid[data-color-mode="electron_affinity_ev"] .pt-heatmap-val,
.pt-grid[data-color-mode="atomic_mass_value"] .pt-heatmap-val,
.pt-grid[data-color-mode="block"] .pt-heatmap-val {
  display: block;
}

/* Compact mode hides secondary rows for a clean compact view */
.pt-grid.pt-compact-mode .pt-cell {
  min-height: clamp(30px, 4.2cqw, 60px);
  padding: 2px 3px;
}

.pt-grid.pt-compact-mode .pt-ox,
.pt-grid.pt-compact-mode .pt-row-mid1,
.pt-grid.pt-compact-mode .pt-row-mid2,
.pt-grid.pt-compact-mode .pt-conf {
  display: none !important;
}

/* Scroll mode: Ensure full size cards with all rows shown */
.pt-grid.pt-scroll-mode .pt-cell {
  min-width: 84px !important;
  min-height: 94px !important;
  aspect-ratio: auto;
}

.pt-grid.pt-scroll-mode:not(.pt-compact-mode) .pt-row,
.pt-grid.pt-scroll-mode:not(.pt-compact-mode) .pt-row-mid1,
.pt-grid.pt-scroll-mode:not(.pt-compact-mode) .pt-row-mid2 {
  display: flex !important;
}

.pt-grid.pt-scroll-mode:not(.pt-compact-mode) .pt-ox {
  display: inline-block !important;
}

.pt-grid.pt-scroll-mode:not(.pt-compact-mode) .pt-conf {
  display: block !important;
}

.pt-grid.pt-scroll-mode .pt-name {
  display: block !important;
}

.pt-grid.pt-scroll-mode .pt-group-roman {
  display: inline !important;
}

/* Responsive container queries to keep cell contents sharp and legible on any screen width */
/* Notice: only active when NOT in scroll mode */
@container ptgrid (max-width: 1220px) {
  .pt-grid:not(.pt-scroll-mode) .pt-row-mid2 {
    display: none; /* Hide atomic radius and affinity row when width is compact */
  }
}

@container ptgrid (max-width: 960px) {
  .pt-grid:not(.pt-scroll-mode) .pt-ox,
  .pt-grid:not(.pt-scroll-mode) .pt-conf {
    display: none; /* Hide electron configuration and oxidation states on narrower screens */
  }
}

@container ptgrid (max-width: 760px) {
  .pt-grid:not(.pt-scroll-mode) .pt-row-mid1 {
    display: none; /* Hide 1st IE & mass row on tablet/mobile screens */
  }
  .pt-grid:not(.pt-scroll-mode) .pt-name {
    font-size: clamp(0.34rem, 1.2cqw, 0.55rem);
  }
  .pt-grid:not(.pt-scroll-mode) .pt-cell {
    min-height: clamp(30px, 5.5cqw, 46px);
  }
}

@container ptgrid (max-width: 520px) {
  .pt-grid:not(.pt-scroll-mode) .pt-name {
    display: none; /* On narrow mobile, show atomic number + phase and symbol */
  }
  .pt-grid:not(.pt-scroll-mode) .pt-group-roman {
    display: none;
  }
}

/* Dimmed / Matched filter states */
.pt-cell.pt-dimmed {
  opacity: 0.2;
  filter: grayscale(65%);
}

.pt-cell.pt-matched {
  box-shadow: 0 0 0 2px var(--cat-stroke), 0 3px 8px rgba(0, 0, 0, 0.12);
}

/* Highlight specific property when hovering sample callout labels */
.pt-grid[data-highlight-prop] .pt-z,
.pt-grid[data-highlight-prop] .pt-ox,
.pt-grid[data-highlight-prop] .pt-mass,
.pt-grid[data-highlight-prop] .pt-ion,
.pt-grid[data-highlight-prop] .pt-rad,
.pt-grid[data-highlight-prop] .pt-aff,
.pt-grid[data-highlight-prop] .pt-sym,
.pt-grid[data-highlight-prop] .pt-name,
.pt-grid[data-highlight-prop] .pt-conf {
  opacity: 0.22;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.pt-grid[data-highlight-prop="z"] .pt-z,
.pt-grid[data-highlight-prop="ox"] .pt-ox,
.pt-grid[data-highlight-prop="mass"] .pt-mass,
.pt-grid[data-highlight-prop="ion"] .pt-ion,
.pt-grid[data-highlight-prop="rad"] .pt-rad,
.pt-grid[data-highlight-prop="aff"] .pt-aff,
.pt-grid[data-highlight-prop="sym"] .pt-sym,
.pt-grid[data-highlight-prop="name"] .pt-name,
.pt-grid[data-highlight-prop="conf"] .pt-conf {
  opacity: 1 !important;
  background-color: #fff3cd;
  color: #212529 !important;
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 800;
}

/* Enlarged Sample Element Card in top legend */
.pt-sample-elem {
  width: 148px;
  min-width: 148px;
  min-height: 142px;
  padding: 7px 9px;
  border-width: 3px;
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.pt-sample-elem .pt-row {
  font-size: 0.78rem;
}

.pt-sample-elem .pt-ox,
.pt-sample-elem .pt-mass,
.pt-sample-elem .pt-ion,
.pt-sample-elem .pt-rad,
.pt-sample-elem .pt-aff {
  font-size: 0.75rem;
}

.pt-sample-elem .pt-sym {
  font-size: 1.75rem;
  margin: 2px 0;
}

.pt-sample-elem .pt-name {
  font-size: 0.85rem;
}

.pt-sample-elem .pt-conf {
  font-size: 0.75rem;
}

/* Modal Preview Element Card */
.pt-modal-elem {
  width: 175px;
  min-height: 168px;
  padding: 9px 11px;
  border-width: 3px;
  border-radius: 14px;
  cursor: default;
}

.pt-modal-elem:hover {
  transform: none;
}

.pt-modal-elem .pt-row,
.pt-modal-elem .pt-ox,
.pt-modal-elem .pt-mass,
.pt-modal-elem .pt-ion,
.pt-modal-elem .pt-rad,
.pt-modal-elem .pt-aff {
  font-size: 0.84rem;
}

.pt-modal-elem .pt-sym {
  font-size: 2.1rem;
}

.pt-modal-elem .pt-name {
  font-size: 0.95rem;
}

.pt-modal-elem .pt-conf {
  font-size: 0.82rem;
}

/* Callout labels next to Sample Card */
.pt-callout-left,
.pt-callout-right {
  font-size: 0.74rem;
  line-height: 1.32;
}

.pt-callout-item {
  padding: 1px 5px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.12s ease;
  white-space: nowrap;
}

.pt-callout-item:hover {
  background-color: var(--pt-callout-hover-bg);
}

.pt-callout-sym {
  font-size: 1.05rem;
  line-height: 1.25;
}

.pt-callout-spacer {
  height: 54px;
}

/* Category Legend Boxes */
.pt-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 5px;
}

.pt-cat-box {
  border: 2px solid var(--cat-stroke);
  background-color: var(--cat-fill);
  color: var(--pt-text-dark);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 0.74rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  text-align: left;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

[data-bs-theme="dark"] .pt-cat-box,
body.pt-dark-theme .pt-cat-box {
  border-color: var(--cat-stroke-dark, var(--cat-stroke));
  background-color: var(--cat-fill-dark, var(--cat-fill));
  color: #f1f3f5;
}

.pt-cat-box:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.pt-cat-box.active {
  box-shadow: 0 0 0 2.5px #212529;
  transform: translateY(-1px);
}

[data-bs-theme="dark"] .pt-cat-box.active,
body.pt-dark-theme .pt-cat-box.active {
  box-shadow: 0 0 0 2.5px #f8f9fa;
}

.pt-cat-count {
  background: rgba(255, 255, 255, 0.85);
  color: #212529;
  font-size: 0.66rem;
}

[data-bs-theme="dark"] .pt-cat-count,
body.pt-dark-theme .pt-cat-count {
  background: rgba(0, 0, 0, 0.6);
  color: #f8f9fa;
}

/* State & Property Buttons */
.pt-state-btn {
  border: 1px solid var(--pt-card-border);
  background-color: var(--pt-card-bg);
  color: var(--pt-text-main);
  font-size: 0.76rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pt-state-btn:hover,
.pt-state-btn.active {
  background-color: var(--pt-hdr-hover-bg);
  color: var(--pt-hdr-hover-text);
  border-color: var(--pt-hdr-hover-bg);
}

/* Continuous Heatmap Gradient Bar */
.pt-gradient-bar {
  width: 220px;
  height: 14px;
  border-radius: 7px;
  border: 1px solid #adb5bd;
  background: linear-gradient(90deg, #e0f2fe 0%, #7dd3fc 25%, #5eead4 50%, #fde047 75%, #fb7185 100%);
}

/* Trend Chart Tooltip */
.pt-chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(33, 37, 41, 0.94);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  z-index: 30;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-xs {
  padding: 0.15rem 0.45rem;
  font-size: 0.74rem;
  border-radius: 0.25rem;
}

/* Form controls & Buttons styling across themes */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
body.pt-dark-theme .form-control,
body.pt-dark-theme .form-select {
  background-color: var(--pt-input-bg) !important;
  color: var(--pt-text-main) !important;
  border-color: var(--pt-input-border) !important;
}

[data-bs-theme="dark"] .input-group-text,
body.pt-dark-theme .input-group-text {
  background-color: var(--pt-input-group-addon-bg) !important;
  color: var(--pt-text-muted) !important;
  border-color: var(--pt-input-border) !important;
}

.btn-check:checked + .btn-outline-secondary {
  background-color: #212529;
  color: #ffffff;
  border-color: #212529;
  font-weight: 700;
}

[data-bs-theme="dark"] .btn-outline-secondary,
body.pt-dark-theme .btn-outline-secondary {
  border-color: #495057;
  color: #dee2e6;
}

[data-bs-theme="dark"] .btn-check:checked + .btn-outline-secondary,
body.pt-dark-theme .btn-check:checked + .btn-outline-secondary {
  background-color: #f8f9fa;
  color: #14161a;
  border-color: #f8f9fa;
  font-weight: 700;
}

.pt-dark-dl-btn {
  border-color: #495057;
}

[data-bs-theme="dark"] .pt-dark-dl-btn,
body.pt-dark-theme .pt-dark-dl-btn {
  border-color: #adb5bd;
  color: #f1f3f5;
}

/* Sortable Data Table styling */
#pt-data-table {
  color: var(--pt-text-main);
  border-color: var(--pt-table-border);
}

#pt-data-table th,
#pt-data-table td {
  background-color: var(--pt-table-bg);
  color: var(--pt-text-main);
  border-color: var(--pt-table-border);
}

[data-bs-theme="dark"] #pt-data-table tbody tr:hover td,
body.pt-dark-theme #pt-data-table tbody tr:hover td {
  background-color: #252a34;
}

/* Modal Dark Theme */
[data-bs-theme="dark"] .modal-content,
body.pt-dark-theme .modal-content {
  background-color: var(--pt-card-bg);
  color: var(--pt-text-main);
  border-color: var(--pt-card-border);
}

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer,
body.pt-dark-theme .modal-header,
body.pt-dark-theme .modal-footer {
  border-color: var(--pt-card-border);
}

[data-bs-theme="dark"] .btn-close,
body.pt-dark-theme .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}