/* Global Styles */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: #051122;
  color: #d7d7d7;
  overflow-x: hidden;
}

/* Allow hero banner to break out of constrained layout */
main {
  overflow-x: hidden;
}

/* Global width consistency - apply to ALL pages */
body .page-columns,
body main.content,
body #quarto-content,
body .quarto-layout-panel,
body .column-page,
body .column-page-left,
body .column-page-right,
body #quarto-margin-sidebar,
body .quarto-container,
div#quarto-content,
div#quarto-content > *,
#quarto-content main,
main.content > .page-columns {
  max-width: 1400px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Override Quarto's default narrow content width */
body {
  --quarto-body-width: 1400px !important;
}

/* Target the article/main content area specifically */
article.page-columns,
.page-columns.page-full {
  max-width: 1400px !important;
}

/* Improve readability */
p {
  line-height: 1.6;
}

/* Code blocks */
pre {
  border-radius: 0.3rem;
}

/* Hide all R code blocks by default (keep output) */
.cell-code,
div.sourceCode,
pre.sourceCode {
  display: none !important;
}

/* Show code only if explicitly marked to show */
.cell.code-visible .cell-code,
.cell.code-visible div.sourceCode,
.cell.code-visible pre.sourceCode {
  display: block !important;
}

/* Tables */
table {
  margin: 1rem 0;
}

/* Enhanced Callout styling */
.callout {
  border-radius: 0.5rem;
  margin: 1rem 0;
  background-color: #FFF2db;
  border: 2px solid #4b7874;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Callout left border colors matching theme */
.callout-note {
  border-left: 4px solid #28a745;
}

.callout.callout-style-default.callout-note {
  border-left-color: #28a745;
}

.callout-warning {
  border-left: 4px solid #b89000;
}

.callout.callout-style-default.callout-warning {
  border-left-color: #b89000;
}

.callout-important {
  border-left: 4px solid #793d03;
}

.callout.callout-style-default.callout-important {
  border-left-color: #793d03;
}

.callout-tip {
  border-left: 4px solid #cfa600;
}

.callout.callout-style-default.callout-tip {
  border-left-color: #cfa600;
}

/* Callout header/title background - same as body */
.callout-header,
.callout-title-container,
div.callout-title-container {
  background-color: #FFF2db !important;
  border-bottom: none !important;
}

/* Callout headers - dark brown for readability on beige background */
.callout-title,
.callout-header,
.callout > .callout-title-container > .callout-title {
  color: #5A2800 !important;
  font-weight: 600;
  font-size: 1.1rem;
  background-color: transparent !important;
}

/* Callout body text */
.callout-body,
.callout p {
  color: #5A2800;
  line-height: 1.6;
}

/* Callout icons - theme colors - very aggressive targeting */
.callout-icon,
.callout-icon::before,
i.callout-icon,
i.callout-icon::before {
  color: #5A2800 !important;
}

/* Note callout - bright green */
.callout-note .callout-icon,
.callout-note .callout-icon::before,
.callout-note i.callout-icon,
.callout-note i.callout-icon::before,
.callout-note.callout-style-default .callout-icon,
.callout-note.callout-style-default .callout-icon::before,
.callout-note.callout-style-default i.callout-icon::before,
.callout-note > .callout-header .callout-icon::before,
div.callout-note .callout-icon::before,
div.callout.callout-note .callout-icon::before,
.callout-note .bi::before,
.callout-note i.bi::before {
  color: #28a745 !important;
}

/* Warning callout - brown-gold */
.callout-warning .callout-icon,
.callout-warning .callout-icon::before,
.callout-warning i.callout-icon,
.callout-warning i.callout-icon::before,
.callout-warning.callout-style-default .callout-icon,
.callout-warning.callout-style-default .callout-icon::before,
.callout-warning.callout-style-default i.callout-icon::before,
.callout-warning > .callout-header .callout-icon::before,
div.callout-warning .callout-icon::before,
div.callout.callout-warning .callout-icon::before,
.callout-warning .bi::before,
.callout-warning i.bi::before {
  color: #b89000 !important;
}

/* Important callout - dark brown */
.callout-important .callout-icon,
.callout-important .callout-icon::before,
.callout-important i.callout-icon,
.callout-important i.callout-icon::before,
.callout-important.callout-style-default .callout-icon,
.callout-important.callout-style-default .callout-icon::before,
.callout-important.callout-style-default i.callout-icon::before,
.callout-important > .callout-header .callout-icon::before,
div.callout-important .callout-icon::before,
div.callout.callout-important .callout-icon::before,
.callout-important .bi::before,
.callout-important i.bi::before {
  color: #793d03 !important;
}

/* Tip callout - gold */
.callout-tip .callout-icon,
.callout-tip .callout-icon::before,
.callout-tip i.callout-icon,
.callout-tip i.callout-icon::before,
.callout-tip.callout-style-default .callout-icon,
.callout-tip.callout-style-default .callout-icon::before,
.callout-tip.callout-style-default i.callout-icon::before,
.callout-tip > .callout-header .callout-icon::before,
div.callout-tip .callout-icon::before,
div.callout.callout-tip .callout-icon::before,
.callout-tip .bi::before,
.callout-tip i.bi::before {
  color: #cfa600 !important;
}

/* Dropdown menus - slightly rounded corners */
.navbar .dropdown-menu {
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
  border: 1px solid #cfa600;
  padding: 0.25rem;
  background-color: #FFF2db;
}

.navbar .dropdown-item {
  border-radius: 0.25rem;
  margin: 0.125rem 0;
  color: #5A2800;
}

.navbar .dropdown-item:hover {
  background-color: rgba(207, 166, 0, 0.15);
  color: #793d03;
}

/* Navbar styling */
.navbar {
  background-color: #0D2E2B !important;
  border-bottom: 2px solid #4b7874;
}

.navbar .navbar-brand,
.navbar .nav-link {
  color: #d7d7d7 !important;
}

.navbar .nav-link:hover {
  color: #cfa600 !important;
}

/* Footer styling - hidden but ensure background matches if it appears */
.nav-footer,
footer,
.footer {
  display: none !important;
  background-color: #051122 !important;
}

/* DT Tables styling */
.dataTables_wrapper {
  color: #5A2800;
  max-width: 100% !important;
  overflow-x: auto;
}

table.dataTable {
  max-width: 100% !important;
}

/* Round corners on DT tables */
table.dataTable {
  border-radius: 0.5rem;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}

/* Round top corners on header */
table.dataTable thead th:first-child {
  border-top-left-radius: 0.5rem;
}

table.dataTable thead th:last-child {
  border-top-right-radius: 0.5rem;
}

/* Round bottom corners on last row */
table.dataTable tbody tr:last-child td:first-child {
  border-bottom-left-radius: 0.5rem;
}

table.dataTable tbody tr:last-child td:last-child {
  border-bottom-right-radius: 0.5rem;
}

/* DT filter and info text - pale gold */
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_length label {
  color: #b89000 !important;
  font-weight: 500;
}

table.dataTable thead {
  background-color: #FFF2db;
  color: #5A2800;
}

table.dataTable thead th {
  border-bottom: 2px solid #c9a788;
  font-weight: 700;
}

table.dataTable tbody tr {
  background-color: #FFF2db;
}

table.dataTable tbody tr:nth-child(even) {
  background-color: #debb9d;
}

table.dataTable tbody td {
  border-bottom: 1px solid #c9a788;
  color: #5A2800;
}

/* DT filter inputs */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background-color: #FFF2db;
  border: 1px solid #4b7874;
  color: #5A2800;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
}

/* Hide DT table captions */
table.dataTable caption,
.dataTables_wrapper caption {
  display: none !important;
}

/* DT pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  background-color: #debb9d;
  border: 1px solid #793d03;
  color: #5A2800 !important;
  border-radius: 0.25rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: #cfa600;
  border-color: #793d03;
  color: white !important;
}

/* Current page number - pale gold */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background-color: #b89000 !important;
  border-color: #793d03 !important;
  color: #FFF2db !important;
  font-weight: 700;
}

/* Previous and Next buttons - pale gold text */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
  color: #b89000 !important;
  font-weight: 600;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.next:hover {
  background-color: #b89000 !important;
  color: #FFF2db !important;
}

/* DT selected rows - lighter than default */
table.dataTable tbody tr.selected,
table.dataTable tbody tr.selected > td {
  background-color: rgba(207, 166, 0, 0.2) !important;
  color: #5A2800 !important;
}

table.dataTable tbody tr.selected:hover {
  background-color: rgba(207, 166, 0, 0.25) !important;
}

/* Override DT default dark selection color */
table.dataTable.display tbody tr.selected,
table.dataTable.hover tbody tr.selected:hover {
  background-color: rgba(207, 166, 0, 0.2) !important;
}

/* Ensure highlighted cells in selected rows remain readable */
table.dataTable tbody tr.selected td.highlight {
  background-color: rgba(207, 166, 0, 0.3) !important;
  color: #5A2800 !important;
}

/* Fix image warping in DataTables */
table.dataTable img {
  object-fit: contain;
  display: block;
  width: 32px !important;
  height: 32px !important;
}

/* ============================================================================
   EMPLOYEE PROFILE STYLES
   ============================================================================ */

/* Force employee profile pages to match other page widths */
body:has(.employee-profile) .page-columns,
body:has(.employee-profile) main.content,
body:has(.employee-profile) #quarto-content {
  max-width: 1400px !important;
  width: 100%;
}

.employee-profile {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
}

.profile-container {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 3rem;
  background-color: #051122;
  padding: 2rem;
  border-radius: 0.5rem;
  border: none;
  margin-bottom: 2rem;
  align-items: start;
}

/* Ensure Progress section and tabs are full width */
.employee-profile + h2,
.employee-profile ~ .panel-tabset {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.profile-photo {
  margin: 0;
  padding: 0;
}

.profile-photo img {
  width: 100%;
  max-width: 300px;
  border-radius: 0.5rem;
  border: 3px solid #3a3738;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  display: block;
  margin: 0;
  vertical-align: top;
  position: relative;
  top: 3px;
}

.profile-info h2 {
  margin-top: 0;
  color: #cfa600;
  font-size: 2rem;
}

.profile-info .role {
  color: #793d03;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.profile-info {
  margin: 0;
  padding: 0;
}

.profile-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 3px solid #3a3738;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.profile-table th,
.profile-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #c9a788;
}

.profile-table th {
  background-color: #0D2E2B;
  color: #cfa600;
  font-weight: 600;
  width: 200px;
}

.profile-table td {
  background-color: #debb9d;
  color: #5A2800;
}

.profile-table tr:last-child td,
.profile-table tr:last-child th {
  border-bottom: none;
}

.profile-table a {
  color: #004294;
  text-decoration: none;
  font-weight: 500;
}

.profile-table a:hover {
  text-decoration: underline;
}

/* Responsive layout for profiles */
@media (max-width: 768px) {
  .profile-container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .profile-photo img {
    max-width: 200px;
    margin: 0 auto;
    display: block;
  }

  .profile-table th {
    width: 150px;
  }
}

/* Constrain DT tables in all panel-tabsets to prevent width variations */
.panel-tabset .dataTables_wrapper {
  width: 100%;
  max-width: 1400px;
  overflow-x: auto;
}

.panel-tabset table.dataTable {
  width: 100% !important;
  max-width: 100%;
}

/* Ensure the tab content area doesn't cause layout shift */
.panel-tabset .tab-content {
  width: 100%;
}

/* Style tab panels to match DT tables - APPLIES TO ALL PANEL-TABSETS */
.panel-tabset {
  margin-top: 2rem;
}

/* Style the tab buttons to match DT table headers */
.panel-tabset .nav-tabs {
  border: none;
  border-radius: 0.5rem 0.5rem 0 0;
  overflow: hidden;
}

.panel-tabset .nav-tabs .nav-link {
  background-color: #051122;
  color: #cfa600;
  border: none;
  border-right: 1px solid #4b7874;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  margin: 0;
  border-radius: 0;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.panel-tabset .nav-tabs .nav-link:last-child {
  border-right: none;
}

.panel-tabset .nav-tabs .nav-link:hover {
  background-color: #0D2E2B;
  color: #cfa600;
}

.panel-tabset .nav-tabs .nav-link.active {
  background-color: #FFF2db;
  color: #5A2800;
  font-weight: 700;
}

/* Round the first and last tab buttons */
.panel-tabset .nav-tabs .nav-link:first-child {
  border-top-left-radius: 0.5rem;
}

.panel-tabset .nav-tabs .nav-link:last-child {
  border-top-right-radius: 0.5rem;
}

/* Style the tab content area */
.panel-tabset .tab-content {
  background-color: #FFF2db;
  padding: 1.5rem;
  border-radius: 0 0 0.5rem 0.5rem;
  border: none;
}

/* Mobile responsiveness for tabs */
@media (max-width: 768px) {
  .panel-tabset .nav-tabs .nav-link {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
}

/* Force kable table to align with photo */
.profile-info .kable_wrapper,
.profile-info > table:first-of-type {
  margin-top: 0 !important;
}

/* Remove any extra spacing from kableExtra */
.profile-info .table {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Add spacing between search bar and table */
.dataTables_wrapper .dataTables_filter {
  margin-bottom: 1rem;
}

.dataTables_wrapper .dataTables_length {
  margin-bottom: 1rem;
}

/* ============================================================================
   CHARACTER PROFILE STYLES
   ============================================================================ */

/* Force character profile pages to match page widths */
body:has(.character-profile) .page-columns,
body:has(.character-profile) main.content,
body:has(.character-profile) #quarto-content {
  max-width: 1400px !important;
  width: 100%;
}

.character-profile {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
}

.character-profile .profile-container {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 3rem;
  background-color: #051122;
  padding: 2rem;
  border-radius: 0.5rem;
  border: none;
  margin-bottom: 2rem;
  align-items: start;
}

.character-profile .profile-photo {
  margin: 0;
  padding: 0;
}

.character-profile .profile-photo img {
  width: 100%;
  max-width: 300px;
  border-radius: 0.5rem;
  border: 3px solid #3a3738;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  display: block;
  margin: 0;
  vertical-align: top;
  position: relative;
  top: 3px;
}

.character-profile .profile-info h2 {
  margin-top: 0;
  color: #cfa600;
  font-size: 2rem;
}

.character-profile .profile-info {
  margin: 0;
  padding: 0;
}

/* Responsive layout */
@media (max-width: 768px) {
  .character-profile .profile-container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .character-profile .profile-photo img {
    max-width: 200px;
    margin: 0 auto;
    display: block;
  }
}

/* ============================================================================
   CREATURE PROFILE STYLES
   ============================================================================ */

/* Force creature profile pages to match page widths */
body:has(.creature-profile) .page-columns,
body:has(.creature-profile) main.content,
body:has(.creature-profile) #quarto-content {
  max-width: 1400px !important;
  width: 100%;
}

.creature-profile {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
}

.creature-profile .profile-container {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 3rem;
  background-color: #051122;
  padding: 2rem;
  border-radius: 0.5rem;
  border: none;
  margin-bottom: 2rem;
  align-items: start;
}

.creature-profile .profile-photo {
  margin: 0;
  padding: 0;
}

.creature-profile .profile-photo img {
  width: 100%;
  max-width: 300px;
  border-radius: 0.5rem;
  border: 3px solid #3a3738;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  display: block;
  margin: 0;
  vertical-align: top;
  position: relative;
  top: 3px;
}

.creature-profile .profile-info h2 {
  margin-top: 0;
  color: #cfa600;
  font-size: 2rem;
}

.creature-profile .profile-info {
  margin: 0;
  padding: 0;
}

/* Responsive layout */
@media (max-width: 768px) {
  .creature-profile .profile-container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .creature-profile .profile-photo img {
    max-width: 200px;
    margin: 0 auto;
    display: block;
  }
}