/* ========================================
   CRITICAL MOBILE FIXES FOR MKDOCS MATERIAL
   
   ROOT CAUSE: white_label.css has this rule:
   .md-header__button, label[for="__drawer"] { display: none !important; }
   
   This HIDES the hamburger menu on ALL screen sizes.
   We must override it with EQUAL OR GREATER specificity.
   ======================================== */

/* ===== FIX #1: FORCE SHOW HAMBURGER MENU (Override white_label.css) ===== */
/* This must come BEFORE the media query to apply to all sizes, then refine in mobile */
/* CRITICAL: white_label.css line 107 has: label[for="__drawer"] { display: none !important; } */
/* HTML structure: header.md-header > nav.md-header__inner > label[for="__drawer"] */
/* ITERATION 3: Fixed selector - label is GRANDCHILD not direct child! */
html body header.md-header nav.md-header__inner label.md-header__button.md-icon[for="__drawer"],
html body header.md-header .md-header__inner > label.md-header__button[for="__drawer"],
html body .md-header .md-header__inner label.md-icon[for="__drawer"],
html body .md-header label.md-header__button.md-icon[for="__drawer"],
html body header.md-header label.md-icon[for="__drawer"],
html body header.md-header .md-header__inner label[for="__drawer"] {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  margin: 0.2rem !important;
  padding: 0.4rem !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 100 !important;
}

/* Hide hamburger on desktop - nav is always visible there */
@media screen and (min-width: 76.25em) {
  html body header.md-header nav.md-header__inner label.md-header__button.md-icon[for="__drawer"],
  html body header.md-header .md-header__inner > label.md-header__button[for="__drawer"],
  html body .md-header .md-header__inner label.md-icon[for="__drawer"],
  html body .md-header label.md-header__button.md-icon[for="__drawer"],
  html body header.md-header label.md-icon[for="__drawer"],
  html body header.md-header .md-header__inner label[for="__drawer"] {
    display: none !important;
  }
}

/* ===== MOBILE-SPECIFIC OVERRIDES ===== */
@media screen and (max-width: 76.1875em) {
  /* Let Material theme handle mobile layout - don't force our own */
  .md-main__inner {
    display: block !important;
    grid-template-columns: none !important;
    max-width: 100% !important;
  }
  
  /* Hide sidebars on mobile EXCEPT when drawer is open */
  .md-sidebar--secondary {
    display: none !important;
  }
  
  /* Primary sidebar becomes the drawer - FILL THE SPACE */
  .md-sidebar--primary {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 85vw !important; /* 85% width looks better than 100% */
    max-width: 320px !important; /* Cap at reasonable width */
    height: 100vh !important; /* Full viewport height */
    z-index: 1001 !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateX(-100%) !important; /* Hidden off screen */
    overflow: hidden !important; /* NO SCROLLING - only inner scrollwrap scrolls */
    box-shadow: 4px 0 18px rgba(15, 23, 42, 0.18) !important;
    background: #ffffff !important;
    padding: 0 !important; /* Remove default padding */
  }

  /* Show drawer when checkbox is checked */
  [data-md-toggle="drawer"]:checked ~ .md-container .md-sidebar--primary {
    transform: translateX(0) !important;
  }

  /* Inner container fills drawer completely */
  .md-sidebar--primary .md-sidebar__inner {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important; /* Fill full height */
    height: 100% !important;
    padding: 0 !important; /* Remove padding, let nav items have their own */
    width: 100% !important;
  }

  /* Navigation fills available space */
  .md-sidebar--primary .md-nav--primary {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    padding: 4rem 0 2rem 0 !important; /* Top padding for close button */
    height: 100% !important;
  }

  /* Nav list expands to fill */
  .md-sidebar--primary .md-nav--primary > .md-nav__list {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* All nav items and lists fill width */
  .md-sidebar--primary .md-nav--primary,
  .md-sidebar--primary .md-nav__list,
  .md-sidebar--primary .md-nav__item {
    width: 100% !important;
  }

  /* Nav items have proper padding */
  .md-sidebar--primary .md-nav__item {
    padding: 0 !important;
  }

  /* Nav links fill width with nice padding */
  .md-sidebar--primary .md-nav__link {
    display: block !important;
    width: 100% !important;
    padding: 0.75rem 1.25rem !important;
    margin: 0 !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    color: #333 !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease !important;
  }

  /* Active and hover states */
  .md-sidebar--primary .md-nav__link:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
  }

  .md-sidebar--primary .md-nav__link--active,
  .md-sidebar--primary .md-nav__item--active > .md-nav__link {
    background-color: rgba(0, 179, 51, 0.1) !important;
    color: #00b333 !important;
    font-weight: 600 !important;
  }

  /* Remove confusing nested navigation icons (Iteration 12 fix) */
  .md-sidebar--primary .md-nav__item--nested > .md-nav__link .md-nav__icon,
  .md-sidebar--primary .md-nav__item--nested > label.md-nav__link .md-nav__icon,
  .md-sidebar--primary .md-nav__item--section > .md-nav__link .md-nav__icon,
  .md-sidebar--primary .md-nav__item--section > label.md-nav__link .md-nav__icon {
    display: none !important;
  }
  
  /* Content takes full width */
  .md-main .md-content {
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Responsive page titles for long microcredential names (Iteration 12 fix) */
  .md-content__inner h1,
  .md-typeset h1 {
    font-size: clamp(1.4rem, 5vw, 1.75rem) !important;
    line-height: 1.32 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    letter-spacing: 0.01em !important;
  }
  
  /* Header adjustments for mobile */
  .md-header {
    min-height: 56px !important; /* Baseline header height on mobile */
    height: auto !important; /* Allow header to grow when content wraps */
    padding: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
  }
  
  .md-header__inner {
    padding: 0 4px !important;
    min-height: 56px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
  }
  
  /* CRITICAL: Override white_label.css hiding of hamburger menu */
  /* white_label.css line 107 has: label[for="__drawer"] { display: none !important; } */
  /* HTML: header.md-header > nav.md-header__inner > label[for="__drawer"] */
  /* ITERATION 3: Fixed - label is inside nav.md-header__inner, not direct child of header! */
  html body header.md-header nav.md-header__inner label.md-header__button.md-icon[for="__drawer"],
  html body header.md-header .md-header__inner > label.md-header__button[for="__drawer"],
  html body .md-header .md-header__inner label.md-icon[for="__drawer"],
  html body .md-header .md-header__button.md-icon,
  html body .md-header label.md-icon[for="__drawer"],
  html body header.md-header .md-header__button,
  html body header.md-header label[for="__drawer"],
  html body header.md-header .md-header__inner label[for="__drawer"] {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0.2rem !important;
    padding: 0.4rem !important;
    cursor: pointer !important;
    width: auto !important;
    height: auto !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 100 !important;
  }
  
  /* Ensure the hamburger icon SVG is visible */
  .md-header__button.md-icon svg,
  label[for="__drawer"] svg {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
  }
  
  /* Logo must be visible (white_label might hide it) */
  .md-header .md-logo,
  .md-header .md-header__button.md-logo,
  header.md-header a.md-logo {
    display: block !important;
    visibility: visible !important;
    max-height: 40px !important;
    padding: 0.2rem !important;
    margin: 0 0.4rem !important;
  }
  
  .md-logo img,
  .md-logo svg {
    display: block !important;
    max-height: 36px !important;
    width: auto !important;
  }
  
  /* Hide the site title on mobile while keeping space collapsed */
  .md-header__title {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
  }

  .md-header__title .md-header__ellipsis,
  .md-header__title .md-header__topic,
  header.md-header .md-header__title .md-header__topic .md-ellipsis,
  header.md-header .md-header__title .md-header__ellipsis .md-ellipsis,
  header.md-header .md-header__title .md-header__topic span,
  header.md-header .md-header__title .md-header__ellipsis span {
    display: none !important;
  }
  
  /* Hide dashboard link/button on mobile (takes up space) */
  /* Use ultra-specific selectors to override white_label.css */
  .md-header .md-header__source,
  header.md-header .md-header__source,
  .md-header a.md-source,
  header.md-header a.md-source,
  .md-header .md-source,
  header.md-header .md-source {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
  
  /* Ensure dashboard container does not reserve space; allow flex to wrap properly */
  .md-header #dashboard-nav-container,
  header.md-header #dashboard-nav-container,
  .md-header__inner #dashboard-nav-container {
    margin-left: auto !important; /* push to the right edge without overlapping title */
  }
  
  /* Ensure drawer/navigation works */
  .md-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(15, 23, 42, 0.45) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease !important;
    display: block !important;
    z-index: 999 !important;
  }

  /* Safety: pointer events stay disabled until the drawer toggle adds them via the selectors below. */

  [data-md-toggle="drawer"]:checked ~ .md-overlay {
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }

  /* Ensure overlay is clickable when nested under .md-container */
  [data-md-toggle="drawer"]:checked ~ .md-container .md-overlay {
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }

  /* Extra safety: overlay nested deeper */
  [data-md-toggle="drawer"]:checked ~ .md-container .md-main .md-overlay {
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }
  
  /* Hide any extra buttons/links in header (search, etc.) */
  .md-header .md-header__button:not([for="__drawer"]),
  .md-header .md-header__option,
  .md-header [data-md-component="search"],
  .md-header .md-search {
    display: none !important;
  }
  
  /* Style Dashboard link in navigation drawer */
  .md-nav__item--active > .md-nav__link[href*="mdra-dev.web.app"],
  .md-nav__link[href*="mdra-dev.web.app"],
  .md-nav__link[href*="certifitrax.com"] {
    background-color: #4CAF50 !important;
    color: white !important;
    font-weight: 600 !important;
    padding: 0.8rem 1rem !important;
    margin: 0.5rem 0 !important;
    border-radius: 4px !important;
  }
  
  /* HIDE TABLE OF CONTENTS PANEL (confusing secondary navigation) */
  .md-sidebar--secondary,
  [data-md-component="toc"],
  .md-nav--secondary {
    display: none !important;
  }
  
  /* Hide duplicate label in active nav items - MkDocs shows both label AND link */
  /* Keep the link (<a>), hide the label (for TOC toggle) */
  .md-sidebar--primary .md-nav__item--active > label.md-nav__link[for="__toc"] {
    display: none !important;
  }
  
  /* Fix navigation drawer width - prevent horizontal scrolling */
  .md-nav--primary,
  .md-sidebar--primary .md-sidebar__scrollwrap {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Remove the redundant drawer header + icon so Dashboard link appears first */
  .md-sidebar--primary .md-nav--primary > .md-nav__title,
  .md-sidebar--primary .md-nav--primary > .md-nav__title .md-nav__button,
  .md-sidebar--primary .md-nav--primary > .md-nav__title .md-nav__icon {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }


  /* CRITICAL: Hide ALL back arrow buttons in nested navigation labels */
  .md-sidebar--primary label.md-nav__link::before,
  .md-sidebar--primary .md-nav__item label[for]::before,
  .md-sidebar--primary .md-nav__link[for]::before {
    display: none !important;
    content: none !important;
  }

  /* Hide known internal documentation links as a safety net */
  .md-sidebar--primary .md-nav__link[href*="AUDIT_README"],
  .md-sidebar--primary .md-nav__link[href*="AUDIT_STATUS"],
  .md-sidebar--primary .md-nav__link[href*="audits"],
  .md-sidebar--primary .md-nav__link[href*="governance"],
  .md-sidebar--primary .md-nav__link[href*="reliability"],
  .md-sidebar--primary .md-nav__link[href*="review"],
  .md-sidebar--primary .md-nav__link[href*="security"],
  .md-sidebar--primary .md-nav__link[href*="ux"],
  .md-sidebar--primary .md-nav__link[href*="verification"],
  .md-sidebar--primary .md-nav__link[href*="wallet"] {
    display: none !important;
  }
  
  .md-nav--primary .md-nav__list {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  .md-nav__item {
    max-width: 100% !important;
  }

  .md-nav__link {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important; /* allow wrapping for readability */
  }

  /* Increase specificity for inner label spans to override theme nowrap */
  .md-sidebar--primary .md-nav__link .md-ellipsis,
  .md-sidebar--primary .md-nav__title,
  .md-sidebar--primary .md-nav__title .md-ellipsis {
    white-space: normal !important;
    word-break: break-word !important;
    overflow: visible !important; /* CRITICAL: No scrolling on individual items */
    text-overflow: clip !important; /* No ellipsis truncation */
  }

  /* CRITICAL FIX: Prevent scrolling on ALL navigation elements */
  .md-sidebar--primary .md-nav__link,
  .md-sidebar--primary .md-nav__item,
  .md-sidebar--primary .md-ellipsis,
  .md-sidebar--primary .md-nav__link .md-ellipsis,
  .md-sidebar--primary span.md-ellipsis {
    overflow: visible !important; /* No scrolling whatsoever */
    white-space: normal !important; /* Allow text wrapping */
    word-break: break-word !important; /* Break long words */
    text-overflow: clip !important; /* No ellipsis */
  }

  /* Allow section headers to wrap instead of truncating (Iteration 12 fix) */
  .md-sidebar--primary .md-nav__title {
    white-space: normal !important;
    word-break: break-word !important;
    overflow: visible !important;
    text-overflow: clip !important;
    height: auto !important;
    min-height: 2.25rem !important;
    padding: 0.6rem 1rem 0.6rem 3rem !important; /* Extra left padding for arrow */
    line-height: 1.35 !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    background-color: rgba(76, 175, 80, 0.08) !important;
    color: #1f2937 !important;
    border-left: 3px solid #4CAF50 !important;
    position: relative !important; /* For absolute positioning of button */
  }

  /* Position back arrow INLINE with text - not overlapping */
  .md-sidebar--primary .md-nav__title .md-nav__button,
  .md-sidebar--primary .md-nav__title > button.md-nav__button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    position: absolute !important;
    left: 0.5rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 2rem !important;
    height: 2rem !important;
    opacity: 0.7 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
  }

  /* Style the back arrow icon itself */
  .md-sidebar--primary .md-nav__title .md-nav__button .md-icon,
  .md-sidebar--primary .md-nav__title .md-nav__icon {
    display: block !important;
    visibility: visible !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    opacity: 1 !important;
  }

  /* Ensure back arrow SVG is visible on Safari */
  .md-sidebar--primary .md-nav__title .md-nav__button svg,
  .md-sidebar--primary .md-nav__title .md-nav__icon svg {
    display: block !important;
    visibility: visible !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    fill: currentColor !important;
    opacity: 1 !important;
  }

  .md-drawer__close-button {
    position: absolute !important;
    top: 0.85rem !important;
    right: 0.85rem !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1f2937 !important;
    font-size: 1.5rem !important;
    line-height: 1 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18) !important;
    cursor: pointer !important;
    z-index: 1002 !important;
    padding: 0 !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  [data-md-toggle="drawer"]:checked ~ .md-container .md-drawer__close-button {
    display: flex !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }

  .md-drawer__close-button:focus-visible {
    outline: 3px solid rgba(59, 130, 246, 0.65) !important;
    outline-offset: 2px !important;
  }
  
  /* Content padding to account for fixed header */
  .md-main {
    padding-top: 56px !important;
  }
}

  /* ==========================
     NAV DRAWER SCROLLBAR PROTECTION
     Prevent nasty nested scrollbars and layout shift in the left nav drawer
     - reserve gutter, use thin scrollbars, ensure touch scrolling
     - ONLY the outer scrollwrap scrolls, NOT individual lists
     ========================== */
  .md-sidebar--primary .md-sidebar__scrollwrap {
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important; /* Firefox */
    scrollbar-color: rgba(0,0,0,0.18) transparent !important;
    scrollbar-gutter: stable both-edges !important; /* reserve space for scrollbar */
    max-height: calc(100vh - 56px) !important; /* leave room for fixed header */
    padding-right: 6px !important; /* avoid horizontal overflow when scrollbar appears */
  }

  /* CRITICAL: No scrolling on nav lists themselves - only scrollwrap scrolls */
  .md-sidebar--primary .md-nav--primary > .md-nav__list,
  .md-sidebar--primary .md-nav__list,
  .md-sidebar--primary .md-nav__item,
  .md-sidebar--primary .md-nav__link {
    overflow: visible !important; /* No scrolling whatsoever */
    max-height: none !important; /* No height restrictions */
    height: auto !important; /* Auto height for wrapping */
  }

  .md-sidebar--primary .md-nav__list {
    padding-right: 0 !important;
  }

  /* Webkit scrollbar styling (Chrome, Edge, Safari) - subtle, unobtrusive */
  .md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar {
    width: 9px !important;
  }
  .md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.12) !important;
    border-radius: 8px !important;
  }
  .md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-track {
    background: transparent !important;
  }

  /* CRITICAL: Ensure nested lists NEVER create scrollbars */
  .md-sidebar--primary .md-nav__list .md-nav__list,
  .md-sidebar--primary .md-nav__item .md-nav__list {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
  }

/* ===== SHOW DASHBOARD BUTTON IN HEADER (override previous hide) ===== */
#dashboard-nav-container,
#dashboard-link,
.md-header__inner #dashboard-nav-container,
header.md-header #dashboard-nav-container {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  margin-left: auto !important;
}

#dashboard-link {
  padding: 0.25rem 0.6rem !important;
  border-radius: 4px !important;
  text-decoration: none !important;
}

/* ===== CRITICAL FIX #1: Prevent Horizontal Scroll ===== */
/* Override any width/overflow settings from white_label.css */
.md-main .md-content {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.md-main .md-content__inner {
  max-width: 100% !important;
}

/* ===== CRITICAL FIX #2: Images - Scale to Container ===== */
/* Ensure images never exceed viewport width */
.md-content__inner img,
.md-typeset img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* ===== CRITICAL FIX #3: Tables - Scroll Within Container ===== */
/* Tables should scroll horizontally WITHOUT breaking page layout */
.md-typeset table:not([class]),
.md-typeset table {
  display: block !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* ===== CRITICAL FIX #4: Code Blocks - Prevent Page Overflow ===== */
.md-typeset pre,
.md-typeset code {
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* ===== CRITICAL FIX #5: Text Wrapping - No Vertical Text! ===== */
/* This prevents the "Microcredenti" vertical text bug */
.md-typeset p,
.md-typeset li,
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

/* Links should NOT have min-height that causes vertical stacking */
.md-typeset a {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  /* NO display: inline-block or min-height here - that breaks layout */
}

/* ===== MOBILE-SPECIFIC REFINEMENTS ===== */
@media screen and (max-width: 767px) {
  /* Reduce code block font size slightly for better fit */
  .md-typeset pre,
  .md-typeset code {
    font-size: 13px !important;
  }
  
  /* Table cells can be smaller on mobile */
  .md-typeset table th,
  .md-typeset table td {
    min-width: 80px;
    padding: 8px;
  }
  
  /* Ensure body text is readable on mobile */
  .md-typeset {
    font-size: 16px;
    line-height: 1.6;
  }
  
  /* Content padding for mobile - ensure proper spacing */
  .md-content__inner {
    padding: 16px !important;
  }
}