:root {
  /* Brand Colors */
  --color-dark: #004E89;
  --color-mid: #8D347D;
  --color-light: #57E2E5;

  /* Transparent variants */
  --color-dark-10: #004E891A;
  --color-mid-10: #8D347D1A;
  --color-light-10: #57E2E51A;

  /* Neutral Colors */
  --neutral-0: #FCFCFC;
  --neutral-10: #F2F2F2;
  --neutral-20: #E6E6E6;
  --neutral-40: #CCCCCC;
  --neutral-50: #8C8C8C;
  --neutral-60: #666666;
  --neutral-80: #404040;
  --neutral-90: #262626;
  --neutral-100: #0D0D0D;

  /* Custom Icons */
  --md-admonition-icon--window-restore: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M512 96L160 96c0-35.3 28.7-64 64-64l288 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64l-48 0 0-64 48 0 0-192zM0 224c0-35.3 28.7-64 64-64l288 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 224zm64 40c0 13.3 10.7 24 24 24l240 0c13.3 0 24-10.7 24-24s-10.7-24-24-24L88 240c-13.3 0-24 10.7-24 24z"/></svg>');
  --md-admonition-icon--paw: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M234.5 92.9c14.3 42.9-.3 86.2-32.6 96.8s-70.1-15.6-84.4-58.5 .3-86.2 32.6-96.8 70.1 15.6 84.4 58.5zM100.4 198.6c18.9 32.4 14.3 70.1-10.2 84.1s-59.7-.9-78.5-33.3-14.3-70.1 10.2-84.1 59.7 .9 78.5 33.3zM69.2 401.2C121.6 259.9 214.7 224 256 224s134.4 35.9 186.8 177.2c3.6 9.7 5.2 20.1 5.2 30.5l0 1.6c0 25.8-20.9 46.7-46.7 46.7-11.5 0-22.9-1.4-34-4.2l-88-22c-15.3-3.8-31.3-3.8-46.6 0l-88 22c-11.1 2.8-22.5 4.2-34 4.2-25.8 0-46.7-20.9-46.7-46.7l0-1.6c0-10.4 1.6-20.8 5.2-30.5zM421.8 282.7c-24.5-14-29.1-51.7-10.2-84.1s54-47.3 78.5-33.3 29.1 51.7 10.2 84.1-54 47.3-78.5 33.3zM310.1 189.7c-32.3-10.6-46.9-53.9-32.6-96.8s52.1-69.1 84.4-58.5 46.9 53.9 32.6 96.8-52.1 69.1-84.4 58.5z"/></svg>');
}

/* ============================================================================
   THEME COLORS
   ============================================================================ */
[data-md-color-scheme=default] {
  --md-primary-fg-color: var(--color-mid);
  --md-primary-fg-color--light: var(--color-light);
  --md-primary-fg-color--dark: var(--color-dark);
  --md-primary-bg-color: var(--neutral-0);
  --md-primary-bg-color--light: #ffffffde;
  --md-accent-fg-color: var(--color-light);
  --md-accent-fg-color--transparent: var(--color-light-10);
  --md-accent-bg-color: var(--neutral-0);
  --md-accent-bg-color--light: #ffffffde;
}

/* ============================================================================
   CUSTOM ADMONITIONS
   ============================================================================ */

/* Admonition icons */
.md-typeset .paw-dark > .admonition-title::before,
.md-typeset .paw-dark > summary::before,
.md-typeset .paw-mid > .admonition-title::before,
.md-typeset .paw-mid > summary::before,
.md-typeset .paw-light > .admonition-title::before,
.md-typeset .paw-light > summary::before {
  -webkit-mask-image: var(--md-admonition-icon--paw);
  mask-image: var(--md-admonition-icon--paw);
}

.md-typeset .wireframe > .admonition-title::before,
.md-typeset .wireframe > summary::before {
  -webkit-mask-image: var(--md-admonition-icon--window-restore);
  mask-image: var(--md-admonition-icon--window-restore);
}

/* Dark admonition */
.md-typeset .admonition.wireframe,
.md-typeset details.wireframe,
.md-typeset .admonition.paw-dark,
.md-typeset details.paw-dark {
  border-color: var(--color-dark);
}

.md-typeset .wireframe > .admonition-title,
.md-typeset .wireframe > summary,
.md-typeset .paw-dark > .admonition-title,
.md-typeset .paw-dark > summary {
  background-color: var(--color-dark-10);
}

.md-typeset .paw-dark > .admonition-title::before,
.md-typeset .paw-dark > summary::before,
.md-typeset .wireframe > .admonition-title::before,
.md-typeset .wireframe > summary::before {
  background-color: var(--color-dark);
}

/* Mid admonition */
.md-typeset .admonition.paw-mid,
.md-typeset details.paw-mid {
  border-color: var(--color-mid);
}

.md-typeset .paw-mid > .admonition-title,
.md-typeset .paw-mid > summary {
  background-color: var(--color-mid-10);
}

.md-typeset .paw-mid > .admonition-title::before,
.md-typeset .paw-mid > summary::before {
  background-color: var(--color-mid);
}

/* Light admonition */
.md-typeset .admonition.paw-light,
.md-typeset details.paw-light {
  border-color: var(--color-light);
}

.md-typeset .paw-light > .admonition-title,
.md-typeset .paw-light > summary {
  background-color: var(--color-light-10);
}

.md-typeset .paw-light > .admonition-title::before,
.md-typeset .paw-light > summary::before {
  background-color: var(--color-light);
}

/* ============================================================================
   IFRAMES
   ============================================================================ */
.wireframe-viewer,
.multi-stage-viewer {
  margin: 20px 0;
}

/* Stage buttons for multi-stage viewer */
.stage-btn {
  padding: 8px 16px;
  border: 1px solid var(--neutral-40);
  background-color: var(--neutral-0);
  color: var(--neutral-80);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  white-space: nowrap;
}

.stage-btn:hover {
  background-color: var(--neutral-10);
  border-color: var(--color-mid);
}

.stage-btn.active {
  background-color: var(--color-mid);
  color: var(--neutral-0);
  border-color: var(--color-mid);
  font-weight: 600;
}

.stage-controls {
  flex-basis: 100%;
  order: -1;
}

.wireframe-controls {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.control-group {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.control-group-right {
  margin-left: auto;
}

.control-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-80);
  margin-right: 4px;
}

.wireframe-controls button {
  padding: 8px 16px;
  border: 1px solid var(--neutral-40);
  background-color: var(--neutral-0);
  color: var(--neutral-80);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  white-space: nowrap;
}

.wireframe-controls button:hover {
  background-color: var(--neutral-10);
  border-color: var(--color-mid);
}

.wireframe-controls button.active {
  background-color: var(--color-mid);
  color: var(--neutral-0);
  border-color: var(--color-mid);
}

.viewport-select {
  padding: 6px 12px;
  border: 1px solid var(--neutral-40);
  background-color: var(--neutral-0);
  color: var(--neutral-80);
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 140px;
}

.viewport-select:hover {
  border-color: var(--color-mid);
}

.viewport-select:focus {
  outline: none;
  border-color: var(--color-mid);
  box-shadow: 0 0 0 2px rgba(141, 52, 125, 0.1);
}

.zoom-btn {
  padding: 6px 12px !important;
  min-width: 32px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}

.zoom-input {
  width: 60px;
  padding: 6px 8px;
  border: 1px solid var(--neutral-40);
  background-color: var(--neutral-0);
  color: var(--neutral-80);
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
}

.zoom-input:focus {
  outline: none;
  border-color: var(--color-mid);
  box-shadow: 0 0 0 2px rgba(141, 52, 125, 0.1);
}

.zoom-percentage {
  font-size: 14px;
  color: var(--neutral-60);
  margin-left: -4px;
}

.fullscreen-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px !important;
}

.fullscreen-btn svg {
  display: block;
}

.wireframe-container {
  background-color: var(--neutral-10);
  padding: 20px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 600px;
  position: relative;
  width: 100%;
}

.wireframe-container.fullscreen-active {
  background-color: var(--neutral-90);
  padding: 20px;
  align-items: center;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wireframe-container.fullscreen-active .wireframe-controls {
  width: 100%;
  margin-bottom: 15px;
  background-color: rgba(255, 255, 255, 0.95);
  padding: 10px 15px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.wireframe-container.fullscreen-active .iframe-wrapper {
  max-width: 100%;
  width: 100%;
  flex: 1;
  min-height: 0;
}

.wireframe-container.fullscreen-active .iframe-full {
  height: 100%;
}

.iframe-wrapper {
  background-color: white;
  border: 1px solid var(--neutral-20);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  position: relative;
}

.iframe-full {
  width: 100%;
  height: 800px;
  border: none;
  display: block;
  transform-origin: top left;
}

/* ============================================================================
   CUSTOM TABS
   ============================================================================ */

/* Override MkDocs default tab indicator */
.tabbed-set {
  --md-indicator-x: 0 !important;
  --md-indicator-width: 0 !important;
}

.tabbed-set > .tabbed-content {
  padding-left: 0.5em;
  padding-right: 0.5em;
  border-radius: 0 0 4px 4px;
  border: 1px solid var(--neutral-20);
  margin-top: 0px;
}

.tabbed-set::before {
  display: none !important;
}

.tabbed-set > .tabbed-control {
  display: none;
}

.tabbed-set > .tabbed-labels {
  margin: 0 !important;
  padding-left: 0px !important;
  box-shadow: none;
  gap: 0px;
}

.tabbed-set > .tabbed-labels > label {
  text-align: left;
  background-color: var(--neutral-0);
  margin-bottom: 0px;
  padding: 0px !important;
  border-top: 1px solid var(--neutral-20);
  border-right: 1px solid var(--neutral-20);
  border-radius: 0px;
}

.tabbed-set > .tabbed-labels > label:first-child {
  border-left: 1px solid var(--neutral-20);
  border-top-left-radius: 4px;
}

.tabbed-set > .tabbed-labels > label:last-child {
  border-top-right-radius: 4px;
}

.tabbed-set > input:nth-child(1):checked ~ .tabbed-labels > label:nth-child(1),
.tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > label:nth-child(2),
.tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > label:nth-child(3),
.tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > label:nth-child(4),
.tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > label:nth-child(5),
.tabbed-set > input:nth-child(6):checked ~ .tabbed-labels > label:nth-child(6) {
  border-bottom: 3px solid var(--color-light);
  background-color: var(--neutral-20);
}

/* Small and below (< 600px) */
@media screen and (max-width: 600px) {
  .tabbed-set > .tabbed-labels {
    flex-wrap: wrap;
  }

  .tabbed-set > .tabbed-labels > label {
    width: 100%;
    border-left: 1px solid var(--neutral-20);
    padding-left: 0.8em;
  }

  .tabbed-set > .tabbed-labels > label:first-child {
    border-radius: 4px 4px 0 0;
  }

  .tabbed-set > .tabbed-labels > label:last-child {
    border-radius: 0 0 0 0;
  }

  .tabbed-set > input:nth-child(1):checked ~ .tabbed-labels > label:nth-child(1),
  .md-typeset .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > label:nth-child(2),
  .md-typeset .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > label:nth-child(3),
  .md-typeset .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > label:nth-child(4),
  .md-typeset .tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > label:nth-child(5),
  .md-typeset .tabbed-set > input:nth-child(6):checked ~ .tabbed-labels > label:nth-child(6) {
    border-left: 5px solid var(--color-light);
    border-bottom: 0px;
    font-weight: 700;
  }
}

/* ============================================================================
   CODE BLOCKS
   ============================================================================ */
/* Fix Material's grid display that breaks code into multiple lines */
.md-typeset .highlight span[data-linenos]:before {
  position: sticky;
  left: 0;
}

.md-typeset .highlight code,
.md-typeset .highlight pre {
  display: block;
}

.md-typeset .highlight code .token,
.md-typeset .highlight code span {
  display: inline;
}

/* ============================================================================
   TABLES
   ============================================================================ */
table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
}

th,
td {
  padding: 20px;
  text-align: left;
  border: 1px solid #e0e0e0;
}

th,
.row-header {
  background-color: var(--color-dark);
  font-weight: 600;
  color: var(--neutral-0);
}