/* dmxt-shell.css : shared top nav + footer (safe, minimal collisions) */

:root{
  --dmxt-shell-max: 1320px;

  --dmxt-shell-bg: rgba(8, 26, 51, .60);
  --dmxt-shell-border: rgba(148,163,184,.18);
  --dmxt-shell-text: rgba(255,255,255,.92);
  --dmxt-shell-muted: rgba(255,255,255,.70);
  --dmxt-shell-hover: rgba(255,255,255,.10);
  --dmxt-shell-active: rgba(73,211,255,.14);

  --dmxt-shell-shadow: 0 14px 34px rgba(0,0,0,.28);
  --dmxt-radius: 16px;
}

html[data-theme="light"]{
  --dmxt-shell-bg: rgba(255,255,255,.78);
  --dmxt-shell-border: rgba(15,23,42,.10);
  --dmxt-shell-text: rgba(11,18,32,.92);
  --dmxt-shell-muted: rgba(11,18,32,.70);
  --dmxt-shell-hover: rgba(11,18,32,.06);
  --dmxt-shell-active: rgba(43,127,255,.12);

  --dmxt-shell-shadow: 0 12px 28px rgba(0,0,0,.10);
}

/* Make sure the shell never causes sideways overflow */
.dmxt-topbar, .dmxt-footer { overflow-x: clip; }
.dmxt-topbar * , .dmxt-footer * { min-width: 0; overflow-wrap: anywhere; }

/* Skip link (accessibility) */
.dmxt-skip{
  position: absolute;
  left: -9999px;
  top: 10px;
  z-index: 10000;
  background: #000;
  color: #fff;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
}
.dmxt-skip:focus{ left: 10px; }

/* Top bar */
.dmxt-topbar{
  position: sticky;
  top: 0;
  z-index: 9999;

  border-bottom: 1px solid var(--dmxt-shell-border);
  background: var(--dmxt-shell-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--dmxt-shell-shadow);
}

.dmxt-topbar .dmxt-container{
  max-width: var(--dmxt-shell-max);
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.dmxt-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration: none;
  color: var(--dmxt-shell-text);
}

.dmxt-logo{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  object-fit: contain;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--dmxt-shell-border);
}

.dmxt-brandText{
  display:flex;
  flex-direction: column;
  line-height: 1.15;
}
.dmxt-brandText strong{
  font-size: 13px;
  letter-spacing: -0.2px;
}
.dmxt-brandText span{
  font-size: 12px;
  color: var(--dmxt-shell-muted);
}

.dmxt-spacer{ flex: 1; }

.dmxt-menuBtn{
  display:none;
  align-items:center;
  justify-content:center;
  gap: 8px;

  border: 1px solid var(--dmxt-shell-border);
  background: transparent;
  color: var(--dmxt-shell-text);
  border-radius: 12px;
  padding: 9px 10px;
  cursor: pointer;
}

.dmxt-nav{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}

.dmxt-link{
  display:inline-flex;
  align-items:center;
  gap: 8px;

  color: var(--dmxt-shell-muted);
  text-decoration:none;

  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
}

.dmxt-link:hover{
  background: var(--dmxt-shell-hover);
  border-color: var(--dmxt-shell-border);
  color: var(--dmxt-shell-text);
}

.dmxt-link.active{
  background: var(--dmxt-shell-active);
  border-color: var(--dmxt-shell-border);
  color: var(--dmxt-shell-text);
}

/* Mobile */
@media (max-width: 980px){
  .dmxt-menuBtn{ display:inline-flex; }
  .dmxt-navWrap{
    display:none;
    width: 100%;
    margin-top: 10px;
  }
  .dmxt-navWrap.open{ display:block; }
  .dmxt-nav{
    width: 100%;
    padding: 10px;
    border-radius: var(--dmxt-radius);
    border: 1px solid var(--dmxt-shell-border);
    background: rgba(255,255,255,.06);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Footer */
.dmxt-footer{
  border-top: 1px solid var(--dmxt-shell-border);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-top: 22px;
}

.dmxt-footer .dmxt-container{
  max-width: var(--dmxt-shell-max);
  margin: 0 auto;
  padding: 16px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--dmxt-shell-muted);
  font-size: 12px;
}

.dmxt-footer a{
  color: var(--dmxt-shell-muted);
  text-decoration: none;
}
.dmxt-footer a:hover{
  text-decoration: underline;
  color: var(--dmxt-shell-text);
}

/* ============== PRINT FIX PACK (add at end of dmxt-shell.css) ============== */
@media print {
  /* Use A4 by default */
  @page { size: A4; margin: 12mm; }

  /* Kill any clipping that can truncate print after ~1–2 pages */
  html, body{
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* Make output “document-like” and prevent GPU/blur bugs that cause blank pages */
  body{
    background: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Hide global chrome */
  .dmxt-topbar,
  .dmxt-footer{
    display: none !important;
  }

  /* If pages still have left sidebars from earlier single-page layouts */
  .nav{
    display: none !important;
  }

  /* Disable sticky/fixed that can confuse pagination */
  .dmxt-topbar,
  .nav{
    position: static !important;
    top: auto !important;
  }

  /* Remove blur/filters/shadows that often break printing */
  *{
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Ensure app layout becomes a linear document */
  .app{
    display: block !important;
    grid-template-columns: none !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Avoid clipped hero cards etc. */
  .hero{
    overflow: visible !important;
  }

  /* Allow page breaks inside large sections/cards */
  section, .section, .panel, .card{
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  /* Tables should print fully (no horizontal scroll container clipping) */
  .tableWrap{
    overflow: visible !important;
  }
  table{
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Optional: remove hover UI buttons (if present) */
  button, .btn, .navActions, .navSearch{
    display: none !important;
  }
}
/* ========================================================================== */