/* --------------------------------------------
   HEADER & SIDEBAR (mobile)
--------------------------------------------- */
@media (max-width: 768px) {

  /* Title */
  .pl-header-title .mantine-Text-root:nth-child(1) {
    font-size: 18px !important;
    line-height: 1.1 !important;
  }

  /* Subtitle */
  .pl-header-title .mantine-Text-root:nth-child(2) {
    font-size: 12px !important;
    line-height: 1.1 !important;
  }


  /* Space BETWEEN subtitle and button */
  .pl-header-button > div { /* #CHANGE: fixed > to > */
    margin-top: 2px !important;
  }

  /* Centering + bottom spacing */
  .pl-header-button {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-left: 0 !important;
    text-align: center !important;
    padding-bottom: 0 !important;
    height: auto !important;
    margin-bottom: 4px !important;
  }

  #icon-bar-container {
    top: 80px !important;
    height: calc(100vh - 80px) !important;
    padding-top: 20px !important;
    padding-bottom: 10px !important;
    border-radius: 0 !important;
  }
}


/* --------------------------------------------
   INTRO PAGE (mobile)
--------------------------------------------- */
@media (max-width: 768px) {
  body {
    padding: 0 !important;
  }

  #header-space-mobile {
    padding-top: 30px !important;
  }
}

@media (max-width: 768px) {
  #main-content {
    padding-top: 40px !important;
  }
}


/* --------------------------------------------
   DISCLAIMER (mobile)
--------------------------------------------- */
@media (max-width: 768px) {

  /* Wrapper of the disclaimer */
  #mobile-disclaimer {
    position: relative !important;
    top: auto !important;
    z-index: 10 !important;
    margin-top: 55px !important;

    /* Spacing */
    margin-left: 5px !important;
    margin-right: 5px !important;

    /* Prevent horizontal overflow */
    max-width: calc(100% - 10px) !important;
    overflow-x: hidden !important;
  }

  /* Ensure the inner alert fits within the wrapper */
  #mobile-disclaimer .mantine-Alert-root {
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 6px !important;
  }
}


/* --------------------------------------------
   HEADLINE STATS (mobile)
--------------------------------------------- */
@media (max-width: 768px) {

  /* 0. Disable Mantine lineClamp for all stat descriptions */
  #headline-stats .stat-desc {
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-align: center !important;
    line-height: 1.25 !important;
    margin-top: 4px !important;
  }

  /* 1. Convert headline Grid to a wrapping flex row */
  #headline-stats .mantine-Grid-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    width: 100% !important;
  }

  /* 2. Two-column mobile layout */
  #headline-stats .stat-col {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 6px !important;
    box-sizing: border-box !important;
  }

  /* 3. Remove the vertical dividers */
  #headline-stats .stat-divider {
    display: none !important;
  }

  /* 4. Tile behaviour: equal height, aligned content */
  #headline-stats .stat-tile {
    min-height: 110px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 8px 6px !important;
    gap: 6px !important;
    width: 100% !important;
    padding-bottom: 4px !important; /* ensure tighter bottom padding */
  }

  /* 5. Icon + number: keep on one horizontal line */
  #headline-stats .stat-icon-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;       /* stops stacking */
    white-space: nowrap !important;     /* prevents broken rows */
  }

  /* 6. Icon sizing */
  #headline-stats .stat-icon-row svg {
    width: 26px !important;
    height: 26px !important;
  }

  /* 7. Number sizing */
  #headline-stats .stat-number {
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
  }

  /* 8. Mobile line breaks for the long label */
  .mobile-break {
    display: block !important;
    height: 0 !important;
    line-height: 0 !important;
  }

  #headline-stats {
    padding-bottom: 0 !important;
  }

  .adjust-text-mobile {
    font-size: 12px !important;
    text-align: center !important;
  }

  #area-graph .legend {
    transform: translateY(500px) !important;
  }

  .mantine-Paper-root:has(#area-graph) {
      padding-bottom: 200px !important;
  }

}


/* --------------------------------------------
   BODY TEXT (mobile)
--------------------------------------------- */
@media (max-width: 768px) {
  .mobile-bodytext-adjust {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
}


/* --------------------------------------------
   MAP (mobile)
--------------------------------------------- */
@media (max-width: 768px) {

  .page-title, .map-title, h1, h2 {
    padding-left: 3.5rem !important;
    padding-right: 1rem !important;
    font-size: 1.2rem !important;
    white-space: normal !important;
    text-align: left !important;
  }

  #main-map {
    height: 60vh !important;
    min-height: 360px !important;
    margin-bottom: 0 !important;
  }

  /* Target Plotly colorbar title text */
  .choropleth-figure .cbtitle,          /* newer plotly versions */
  .choropleth-figure g.cb-title text {  /* fallback */
    white-space: normal !important;
    text-wrap: wrap !important;
    width: 120px !important;
    transform: none !important;
    text-align: center !important;
    width: 100% !important;
    }

    

}


/* --------------------------------------------
   SLIDER / RESPONSIVE TEXT (mobile)
--------------------------------------------- */
@media (max-width: 767px) {
  .responsive-text {
    font-size: 15px;
  }
}

@media (max-width: 767px) {
  .responsive-text-2 {
    font-size: 10px;
  }
}

@media (max-width: 767px) {
  .responsive-text-3 {
    font-size: 2px;
  }
}


/* --------------------------------------------
   CHOROPLETH (mobile)
--------------------------------------------- */
@media (max-width: 767px) {
  .choropleth-figure {
    height: 480px !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    padding-bottom: 32px !important;
  }

  #heat-map, #ltla-map {
    margin-bottom: 0px !important;
  }

  /* Remove the enforced vertical clipping wrapper */
  .map-wrapper {
    min-height: 0 !important;       /* removes 500px minimum clamp */
    height: auto !important;
    overflow: visible !important;   /* so button can actually show */
    position: relative !important;
    width: 100%;
  }

/* Remove Mantine Paper's huge fixed height for BOTH cards */
  #main-content .mantine-Paper-root {
    height: auto !important;        
    overflow: visible !important;
    margin-bottom: 24px !important; /* Nice gap between stacked cards on mobile */
  }

  /* Reset the MAP card so it doesn't have huge white space */
  .map-paper {
    padding-bottom: 12px !important; 
  }

  /* Add the extra padding ONLY to the Area Graph card */
  #main-content .mantine-Paper-root:not(.map-paper) {
    padding-bottom: 40px !important;
    }

  /* Force the internal stacks to expand with the graph */
  #main-content .mantine-Stack-root {
    height: auto !important;
  }

/* 1. Keep the main container height locked so the x-axis doesn't move down */
  #area-graph {
    height: 600px !important;
  }

  /* 2. Unclip the specific wrappers and the main graph canvases, completely ignoring the tool icons */
  #area-graph,
  #area-graph .js-plotly-plot,
  #area-graph .plot-container,
  #area-graph .svg-container,
  #area-graph .main-svg {
    overflow: visible !important;
  }

  .mantine-Center-root {
    display: block !important;
    align-items: unset !important;
    justify-content: unset !important;
  }
  

  #overview-table-btn {
    position: static !important;
    margin: 12px auto 0 auto !important;   /* center below colourbar */
    display: block !important;
    transform: none !important;
    left: auto !important;
    bottom: auto !important;
  }
  /*1. Strip the default top margin from ALL titles in the main content */
  #main-content h3.mantine-Title-root {
      margin-top: 0 !important;
      padding-top: 0 !important;
      line-height: 1.2 !important;
  }

  /* 2. Aggressively target the specific Paper card holding the Area Graph */
  .mantine-Paper-root:has(#area-graph),
  #main-content .mantine-Grid-inner > div:last-child .mantine-Paper-root {
      padding-top: 10px !important;
  }

  /* 3. Ensure the internal Stack and Group wrappers aren't adding invisible top gaps */
  .mantine-Paper-root:has(#area-graph) > .mantine-Stack-root,
  .mantine-Paper-root:has(#area-graph) .mantine-Group-root {
      margin-top: 0 !important;
      padding-top: 0 !important;
  }
}


/* --------------------------------------------
   MISC MOBILE RULES
--------------------------------------------- */
@media (max-width: 768px) {
  #image-container {
    display: none;
  }
}

@media (max-width: 768px) {
  #header-space {
    margin-top: 40px;
  }
}

@media (max-width: 768px) {
  .dmc-tabLabel {
    font-size: 13px !important;
  }
}

@media (max-width: 768px) {
  #collapse-sidebar {
    margin-top: 0 !important;
  }
}

/* Responsive button (explicit mobile sizing pulled from desktop file) */
@media (max-width: 767px) {
  .responsive-button {
    height: 20px;   
    font-size: 10px;
    padding: 0 14px;
  }
}

/* partially funded button */
@media (max-width: 768px) {
  #partially-button {
    width: auto !important;
    height: 26px !important;
    min-height: 26px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #partially-button .mantine-Button-label {
    font-size: 11px !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }
}

/* Project table */
@media (max-width: 768px) {
  /* wrap title text */
  .wrap-divider-label .mantine-Divider-label {
    white-space: normal !important;
    text-align: center !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* text sizing and line height */
  .wrap-divider-label .mantine-Text-root {
    font-size: 18px !important; 
    line-height: 1.3 !important;
  }

  /* orange dot bit */
  .table-controls-container {
    flex-direction: column !important;
    gap: 16px !important;
    padding-left: 20px !important;
    padding-right: 10px !important;
    align-items: center !important;
    margin-bottom: 0px !important;
  }

  /* force a dot/description single line */
  .table-controls-container > div:first-child {
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important; 
  }

  /* shrink explanatory text */
  .table-controls-container > div:first-child .mobile-bodytext-adjust {
    white-space: nowrap !important;
    font-size: 10px !important;
  }
}

/* --------------------------------------------
   PARTIALLY FUNDED MODAL (mobile)
--------------------------------------------- */
@media (max-width: 768px) {
  
  /* 1. Expand the Mantine Modal wrapper to use the full screen width */
  .mantine-Modal-inner:has(#partial-table-container) .mantine-Modal-content,
  .mantine-Modal-inner:has(#partial-table-container) section {
    width: 95vw !important;
    max-width: 95vw !important;
    min-width: 95vw !important;
    padding: 10px !important;
  }

  /* 2. Container scroll window */
  #partial-table-container {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
    padding-bottom: 15px !important;
  }

  /* 3. THE NUCLEAR OPTION: Force the table to be wide, forbidding it from squishing */
  #partial-table-container table,
  #partial-table-container .dash-spreadsheet,
  #partial-table-container .mantine-Table-root {
    min-width: 700px !important;  /* <--- This is the magic bullet */
    width: max-content !important;
    display: table !important;
    table-layout: auto !important;
  }

  /* 4. Strictly forbid text wrapping on everything inside the table */
  #partial-table-container th,
  #partial-table-container td,
  #partial-table-container th *,
  #partial-table-container td * {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
  }

  /* 5. Kill sticky overlapping and give the first column breathing room */
  #partial-table-container th,
  #partial-table-container td {
    position: static !important;         /* Unfreezes the sticky columns */
    transform: none !important;
    background-color: #fff !important;   /* Makes cells solid just in case */
  }

  /* Force the first column to be wide enough so text doesn't bleed */
  #partial-table-container th:first-child,
  #partial-table-container td:first-child {
    min-width: 40px !important; 
  }
}


/* --------------------------------------------
   SKILLS!!!!!!
--------------------------------------------- */
/*disclaimer*/
@media (max-width: 768px) {
  /* 1. Wrapper positioning (Identical to main page, but strict to Skills) */
  #mobile-disclaimer-skills {
    position: relative !important;
    top: auto !important;
    z-index: 10 !important;
    margin-top: 40px !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
    max-width: calc(100% - 10px) !important;
    overflow-x: hidden !important;
  }

  /* 2. Alert box sizing */
  #mobile-disclaimer-skills .mantine-Alert-root {
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 6px !important;
  }

  /* 3. Force the text and logos to stack vertically on mobile */
  #mobile-disclaimer-skills .skills-disclaimer-parent-group {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* 4. Aggressively target the text to shrink it */
  #mobile-disclaimer-skills .skills-disclaimer-text,
  #mobile-disclaimer-skills .skills-disclaimer-text * {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  /* 5. Wrap the logos and tighten the gap */
  #mobile-disclaimer-skills .skills-logos-group {
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  /* 6. Aggressively target the images to shrink them and override inline styles */
  #mobile-disclaimer-skills .skills-logos-group img {
    height: 16px !important;
    width: auto !important;
  }
}

/* bar chart and its filters*/
@media (max-width: 768px) {
  
  /* --- 1. TITLE & BUTTON HEADER --- */
  /* Stack the title and the button, left-align everything, force full width */
  .skills-header-group {
    flex-direction: column !important;
    align-items: flex-start !important; /* Changed from center to flex-start */
    gap: 12px !important;
    width: 100% !important; 
  }
  
  /* Override global h2 padding and force left alignment */
  .skills-mobile-title {
    font-size: 18px !important; 
    line-height: 1.2 !important;
    white-space: normal !important; 
    width: 100% !important;
    text-align: left !important; /* Changed from center to left */
    padding-left: 0 !important;    
    padding-right: 0 !important;
  }

  /* Left-align the chart subtitle on mobile */
  .skills-chart-subtitle {
    text-align: left !important; 
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    width: 100% !important;
    margin-bottom: -6px !important; /* Pulls the divider up closer to the text */
  }

  /* Make the summary button match the 'responsive-button' styling */
  .skills-summary-btn {
    width: auto !important;          
    height: 20px !important;         
    min-height: 20px !important;
    font-size: 10px !important;      
    padding: 0 14px !important;
    border-radius: 20px !important;  
  }

  /* --- 2. FILTER SPACING & SIZING --- */

  /* Hide the hardcoded 20px vertical spaces on mobile */
  .skills-mobile-space {
    display: none !important;
  }

  /* Tighten up the gaps between filter groups */
  .skills-filters-main-stack {
    gap: 12px !important;
  }
  
  /* Shrink the divider margin to save vertical space */
  .skills-mobile-divider {
    margin-top: 4px !important;
    margin-bottom: 8px !important;
  }

  /* Shrink filter title fonts */
  .skills-filter-label {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  /* Shrink filter descriptive text and allow it to wrap */
  .skills-filter-desc {
    font-size: 10px !important;
    line-height: 1.2 !important;
    white-space: normal !important; 
  }

  /* Keep the text and the toggle switch on the SAME line */
  .skills-toggle-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; 
    align-items: center !important;
    justify-content: space-between !important; /* Replaces Python inline style */
    width: 100% !important;
    gap: 10px !important;
  }

  /* Allow the text block to fill available space so long text wraps beautifully */
  .skills-toggle-text-stack {
    flex: 1 !important; 
  }

  /* Stop the toggle switch from squishing or shrinking */
  .skills-toggle-switch {
    flex-shrink: 0 !important; 
  }


/* --- 3. SECTOR/REGION FIXES --- */
  
  /* Reduce internal gap and pull the next filter up to reduce whitespace */
  .skills-dynamic-filter-stack {
    gap: 8px !important;
    margin-bottom: -10px !important; /* Pulls the Year Average toggle closer */
  }

  /* Fix the "drop" jump by destroying ghost margins on the hidden dropdown */
  .skills-multi-select[style*="display: none"],
  .skills-multi-select[style*="display:none"] {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    border: none !important;
    overflow: hidden !important;
  }

/* --- 4. GRAPH --- */  
  .skills-bar-chart {
    height: 400px !important; 
    margin-top: 10px !important;
    
    /* Stretch the graph wider to force longer bars */
    width: 130% !important; 
    
    /* Pull it to the left to eat the dead space and center it */
    margin-left: -15% !important; 
    overflow: visible !important;
  }
  /* Shrink the Y-axis labels (Occupation names) */
  .skills-bar-chart .ytick text {
    font-size: 9px !important;
  }

  /* Shrink the X-axis tick labels (The numbers) */
  .skills-bar-chart .xtick text {
    font-size: 9px !important;
  }

  /* Shrink the X-axis Title (e.g., "Annual Workforce (FTE)...") */
  .skills-bar-chart .g-xtitle text {
    font-size: 9px !important;
  }

/* 7. Pull the X-axis title UP and slide it LEFT to center it */
  .skills-bar-chart .g-xtitle {
    transform: translate(-40px, -8px) !important;
  }
  /* 8. Center the entire graph in the available space */
  .skills-bar-chart .svg-container {
    transform: translateX(-45px) !important; 
  }
}

/*--------------------------------------------
  SKILLS MAP (mobile)
---------------------------------------------*/
@media (max-width: 768px) {

  /* Prevent the map from creating horizontal scrollbars on the page */
  body, html {
    overflow-x: hidden !important; 
  }

  /* 1. Adjust width/height ratio to whitsepace*/
  .skills-map-chart {
    width: 166% !important;
    height: 850px !important;
    transform: scale(0.6) !important;
    transform-origin: top left !important;
    margin-bottom: -425px !important;
    margin-right: -66% !important;
  }

/* 4.fix title */
  .skills-map-chart .g-gtitle text {
    font-size: 16px !important; /* Slightly smaller to prevent edge clipping */
    text-anchor: middle !important;
    dominant-baseline: hanging !important;
    transform: translateY(20px) !important;
  }

  /* 5. Shrink the colorbar.*/
  .skills-map-chart g.colorbar {
    transform: scale(1.0) translateX(-15px) translateY(10px) !important;
    transform-origin: top right !important;
  }

  /* Adjust colorbar text size */
  .skills-map-chart g.colorbar text {
    font-size: 12px !important; /* Scales to ~9.5px visually */
  }

  /* 6. Modebar tools (keep usable size) */
  .skills-map-chart .modebar {
    transform: scale(1.2) !important;
    transform-origin: top right !important;
    top: 10px !important;
    right: 10px !important;
  }

  /* 1. Force the modal and its inner wrapper above the sidebar */
  .table-modal-skills,
  .table-modal-skills .mantine-Modal-inner {
    z-index: 99999 !important;
  }
}