body {
    background-color: #fff;
}

a {
    color: #0068a5;
    text-decoration: underline;
}


/************************   Overwrite MDBootstrap  *****************/
a.nav-link, a.navbar-brand, a.dropdown-item {
    text-decoration: none;
}

.navbar-nav .nav-link {
    margin-right: 0.25rem;
    padding-left: 0.5rem;
}

.card-body {
  background-color: #fff !important;
  border: 1px solid #eee;
}

.btn-outline-primary:active {
  color: rgb(47, 90, 162) !important;
  background-color: rgb(226, 234, 247) !important;
}

.highlight {
  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 14px;
  background-color: #f0eeee !important;  
}

.badge {    
  font-weight: 400!important;
}

.btn{
  text-transform: none !important;
}

.navbar-nav .nav-link.active {
  color: black;            /* text color */
  border-bottom: 3px solid #0068a5; /* underline */ 
 
}

/* ===========================
   Custom Bootstrap Primary Button
   =========================== */

/* Normal state */
.btn-primary {
  background-color: #0068a5;   /* main brand color */
  border-color: #1976d2;       /* border color */
  color: #ffffff;              /* text color */
}

/* Active state */
.filter-btn.active {
  box-shadow: 0 0 0 0.2rem rgba(0,0,0,.25); /* subtle outline */
  opacity: 0.9; /* dim a bit */
}

/* Active + Hover */
.filter-btn.active:hover {
  box-shadow: 0 0 0 0.3rem rgba(0,0,0,.35); /* slightly stronger glow */
  opacity: 1; /* fully visible when hovered */
}

/* Active + Focus */
.filter-btn.active:focus,
.filter-btn.active:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(0,0,0,.25); /* subtle outline */
  opacity: 0.9; /* dim a bit */
}

/******************************************************************/


/* Scope all styles to your Markdown area */
.markdown-content {
  /* makes wide tables scroll horizontally on small screens */
  overflow-x: auto;
}

/* Base table */
.markdown-content table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #212529);
  font-size: 0.95rem;
  /* optional subtle border around the table */
  border: 1px solid var(--bs-border-color, #dee2e6);
}

/* Cells */
.markdown-content th,
.markdown-content td {
  padding: 0.5rem 0.75rem;
  vertical-align: top;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

/* Header row */
.markdown-content thead th {
  text-align: left;
  background: var(--bs-tertiary-bg, #f8f9fa);
  font-weight: 600;
  border-bottom: 2px solid var(--bs-border-color, #dee2e6);
}

/* Stripes */
.markdown-content tbody tr:nth-child(odd) {
  background: var(--bs-table-striped-bg, #f8f9fa);
}

/* Hover */
.markdown-content tbody tr:hover {
  background: var(--bs-table-hover-bg, rgba(0,0,0,.03));
}

/* Caption (if you use Markdown captions) */
.markdown-content table caption {
  caption-side: bottom;
  padding: 0.5rem 0;
  color: var(--bs-secondary-color, #6c757d);
  text-align: left;
}

/* Make long words/URLs wrap instead of blowing out layout */
.markdown-content td, .markdown-content th {
  word-break: break-word;
}

.markdown-content {
  /* your normal text stack */
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,"Helvetica Neue",Arial,sans-serif;
}
.markdown-content :is(p,li,blockquote,table) {
  /* prefer color emoji fonts when a glyph is an emoji */
  font-family: inherit, "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji";
}

img.emoji, img.twemoji { height: 1.5em; width: 1.5em; margin: 0 .05em; vertical-align: -.2em; }

/******************************************************************/

.avatar-canvas {
  border: 2px solid #ccc;
  height: 600px;
  position: relative;
  background-color: #f7f7f7;
  margin-bottom: 1rem;
}
.avatar-canvas img {  
  display: block;
  margin-left: auto;
  margin-right: auto;
  pointer-events: none;
}
.drop-zone{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.75rem 1rem;
  border:1px dashed #ccc;        /* optional, just to see the zone */
  border-radius:.5rem;            /* optional */
  gap:1rem;
}

.drag-here{
  margin-left:auto;               /* push to the right */
  background:#eee;                /* grey background */
  color:#555;
  padding:.4rem .75rem;
  border-radius:.5rem;
  white-space:nowrap;
  font-weight:500;
}
.draggable {  
  cursor: grab;
  height: 50px;
}
.overlay-draggable {
  position: absolute;  
  cursor: move;
  pointer-events: auto;
}
button {
  
  padding: 0.5rem 1rem;
  font-size: 1rem;
}
.button-row {
  display: flex;
  gap: 1rem;
}  

h1 {
    margin-bottom: 20px;
}

.thumbnail {
    max-width: 150px;
    margin: 10px;
    cursor: pointer;
    transition: transform 0.2s;
}

.thumbnail:hover {
    transform: scale(1.05);
}

.lightbox {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    justify-content: center;
    align-items: center;
}

.lightbox img {
    max-width: 90%;
    max-height: 90%;
}

.close-btn {
    position: absolute;
    top: 30px;
    right: 40px;
    color: white;
    font-size: 32px;
    cursor: pointer;
}

/******** D3.js Force-Directed Graph Styles ********/

svg { border: 1px solid #ccc; }
circle { fill: steelblue; stroke: #333; stroke-width: 1.5px; }
line { stroke: #999; stroke-opacity: 0.6; }
text { font-size: 12px; }

.bar { fill: steelblue; }
.bar:hover { fill: orange; }
.axis text { font-size: 12px; }

line, path { stroke-width: 2px; }