/* ============================================================
   LoQoG Workshop — MkDocs Material extra.css
   ============================================================ */

/* 1. Fonts */
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&family=Roboto+Mono&display=swap");

/* 2. Material theme colour overrides
      These CSS custom properties are the official way to theme
      Material for MkDocs — they override the palette variables
      set by the [palette] block in mkdocs.yml.              */
:root {
  --md-primary-fg-color:          #1a3a5c;
  --md-primary-fg-color--light:   #2a5a8c;
  --md-primary-fg-color--dark:    #0a1a2c;
  --md-accent-fg-color:           #4a90e2;   /* Swedish blue accent */
  --md-accent-fg-color--dark:     #2a6abf;

  /* Page background & text — matches Quarto's backgroundcolor / fontcolor */
  --md-default-bg-color:          #fafafa;
  --md-default-fg-color:          #333333;
  --md-default-fg-color--light:   #555555;

  /* Typeset colours */
  --md-typeset-color:             #333333;
  --md-typeset-a-color:           #4a90e2;

  /* Code */
  --md-code-bg-color:             #efefef;
  --md-code-fg-color:             #333333;

  /* Sidebar */
  --md-sidebar-width:             240px;
}

/* 3. Base typography */
body,
.md-typeset {
  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #333333;
  line-height: 1.6;
}

/* 4. Headings */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5 {
  font-weight: 600;
  color: #1a2a3a;
}

/* 5. Links */
.md-typeset a {
  color: #4a90e2;
  text-decoration: none;
  transition: border-color 0.2s ease-in-out;
}
.md-typeset a:hover {
  color: #2a6abf;
  text-decoration: underline;
}

/* 6. Buttons / CTA (Mustard Yellow — matches Quarto .btn-primary) */
.md-button,
.md-button--primary {
  background-color: #fecb00;
  color: #333333;
  border: none;
  border-radius: 4px;
  font-weight: 600;
}
.md-button:hover,
.md-button--primary:hover {
  background-color: #e6b800;
  color: #333333;
}

/* 7. Inline code & code blocks */
.md-typeset code,
.md-typeset pre code {
  font-family: "Roboto Mono", Menlo, Consolas, "Courier New", monospace;
  font-size: 0.8rem;
  background: #efefef;
  border-radius: 4px;
}

/* 8. Tables */
.md-typeset table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85em;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}
.md-typeset th,
.md-typeset td {
  border: 1px solid #ebebeb;
  padding: 4px 10px;
  text-align: left;
}
.md-typeset th {
  font-weight: 600;
  background: #f0f0f0;
}
.md-typeset tbody tr:nth-child(even) {
  background: #fcfcfc;
}

/* 9. Sidebar */
.md-sidebar {
  background-color: #fafafa;
}
.md-sidebar__scrollwrap {
  background-color: #fafafa;
}

/* 10. Navbar
        Material uses .md-header for its top bar.
        Replicate the Quarto navbar styles exactly.          */
.md-header {
  background-color: #1a3a5c;
  border-bottom: 3px solid #4a9fd4;
  box-shadow: 0 2px 12px rgba(26, 58, 92, 0.18);
}
.md-header__title {
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}
.md-header__button.md-logo img {
  height: 32px;
}
/* Nav links */
.md-tabs__link {
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  opacity: 0.88;
  transition: opacity 0.15s;
}
.md-tabs__link:hover,
.md-tabs__link--active {
  opacity: 1;
}

/* 11. Dropdown menus (Material calls these navigation pop-overs) */
.md-nav__item .md-nav {
  border-top: 2px solid #4a9fd4;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 16px rgba(26, 58, 92, 0.15);
}

/* 12. Tab panels (replaces Quarto .tab-content / .tab-pane) */
.tabbed-content {
  margin: 0;
  padding: 0;
  border: #fafafa solid 2px;
}
.tabbed-block {
  border: none;
}
.tabbed-labels > label[for].tabbed-label--active {
  background-color: #fafafa;
  color: #333333;
}

/* 13. Bootstrap Icons (loaded via mkdocs.yml extra_css or inline)
        No additional CSS needed — the CDN handles it.      */

/* 14. Admonitions (replace Quarto callouts)
        Material renders ::: note as .admonition.note etc.  */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 4px;
}

/* 15. Search box */
.md-search__form {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 4px;
}

/* 16. Municipality explorer widget styles
        (directly ported from your existing CSS)             */
*, *::before, *::after { box-sizing: border-box; }

.explorer-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  min-height: 78vh;
  border: 1px solid #e2e0da;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.04);
  margin-bottom: 2rem;
}
.explorer-shell .sidebar {
  background: #faf9f7;
  border-right: 1px solid #e2e0da;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.explorer-shell .sidebar h2 {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6b6860;
}
.explorer-shell .sidebar hr {
  border: none;
  border-top: 1px solid #e2e0da;
}
.country-select {
  width: 100%;
  padding: .55rem .75rem;
  border: 1px solid #e2e0da;
  border-radius: 8px;
  background: #ffffff;
  font-size: .9rem;
  color: #1a1917;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b6860' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
}
.country-select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px #dbeafe;
}
.stat-n {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  color: #2563eb;
  font-variant-numeric: tabular-nums;
}
.stat-label { font-size: .75rem; color: #6b6860; margin-top: .15rem; }
.dl-btn {
  padding: .55rem .9rem;
  border: 1px solid #e2e0da;
  border-radius: 8px;
  background: #ffffff;
  font-size: .85rem;
  font-weight: 500;
  color: #1a1917;
  cursor: pointer;
  text-align: left;
  transition: background .12s, border-color .12s, color .12s;
}
.dl-btn:hover:not([disabled]) {
  background: #dbeafe;
  border-color: #2563eb;
  color: #2563eb;
}
.dl-btn[disabled] { opacity: .4; cursor: not-allowed; }
.map-box { position: relative; height: 340px; border-bottom: 1px solid #e2e0da; }
#map { width: 100%; height: 100%; }
.table-box { flex: 1; overflow: auto; padding: 1rem 1.25rem 1.5rem; }
.table-toolbar { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.table-toolbar input {
  flex: 1;
  padding: .45rem .75rem;
  border: 1px solid #e2e0da;
  border-radius: 8px;
  font-size: .88rem;
  background: #f8f7f4;
}
.table-toolbar input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px #dbeafe;
}
.row-count { font-size: .78rem; color: #6b6860; white-space: nowrap; font-variant-numeric: tabular-nums; }
#muni-table, #changes-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
}
#muni-table th, #changes-table th {
  text-align: left;
  padding: .55rem .75rem;
  border-bottom: 2px solid #e2e0da;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6b6860;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: #ffffff;
}
#muni-table th:hover, #changes-table th:hover { color: #2563eb; }
#muni-table td, #changes-table td {
  padding: .5rem .75rem;
  border-bottom: 1px solid #e2e0da;
  color: #1a1917;
  font-family: "Roboto Mono", monospace;
  font-size: .82rem;
}
#muni-table tr:hover td, #changes-table tr:hover td { background: #dbeafe; }
.changes-section {
  background: #ffffff;
  border: 1px solid #e2e0da;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.04);
  padding: 1.5rem;
  overflow: hidden;
}

/* 17. Responsive */
@media (max-width: 700px) {
  .explorer-shell { grid-template-columns: 1fr; }
  .explorer-shell .sidebar { border-right: none; border-bottom: 1px solid #e2e0da; }
}

.md-header__button.md-logo img {
  filter: brightness(0) invert(1);
}

.md-header__button.md-logo img {
  height: 55px;    
}


.plot-frame {
  display: block;
  width: 100%;
  height: 650px;
  border: 0;
  border-radius: 8px;
}


.dataset-preview-wrapper {
  width: 100%;
  overflow-x: auto;
}

.dataset-preview-table {
  width: 100%;
  border-collapse: collapse;
}

.dataset-preview-table th,
.dataset-preview-table td {
  white-space: nowrap;
}