/* public/style.css */
body {
  margin: 0;
  padding: 0;
  background-color: var(--mdc-theme-background);
  color: var(--mdc-theme-text-primary-on-background);
  /* mdc-typography class is now on body tag in HTML */
}
:root {
    /* Define some responsive base values */
    --base-font-size: 16px; /* A good starting point for accessibility */
    --spacing-unit: 1rem; /* For consistent spacing */
    --google-blue: #1a73e8;
    --deeper-blue: #3f51b5;
    --text-color-dark: #424242;
    --border-color-light: #e0e0e0;
}

body {
    font-family: 'Roboto', sans-serif; /* Assuming Roboto is loaded, otherwise use a fallback */
    line-height: 1.6;
    color: var(--text-color-dark);
    margin: 0; /* Remove default body margin */
    padding: 0;
    box-sizing: border-box; /* Ensures padding and border are included in element's total width/height */
}

/* Base box-sizing for all elements for consistent layout behavior */
*, *::before, *::after {
    box-sizing: inherit;
}

.container {
    /* Fluid width with max limit */
    width: 90%; /* Use a percentage for fluid width */
    max-width: 960px;
    margin: clamp(1rem, 5vw, 2.5rem) auto; /* Responsive margin: min 1rem, preferred 5vw, max 2.5rem */
    padding: clamp(1rem, 4vw, 2rem); /* Responsive padding: min 1rem, preferred 4vw, max 2rem */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

h1, h2, h3, h4 {
    color: var(--google-blue);
    margin-top: calc(var(--spacing-unit) * 1.5); /* Use calc for responsive spacing based on unit */
    margin-bottom: var(--spacing-unit);
}

h1 {
    /* Fluid font size for h1 */
    font-size: clamp(2em, 8vw, 2.8em); /* Min 2em, preferred 8vw, max 2.8em */
    text-align: center;
    border-bottom: 2px solid var(--border-color-light);
    padding-bottom: calc(var(--spacing-unit) * 0.8);
    margin-bottom: calc(var(--spacing-unit) * 2);
}

h2 {
    /* Fluid font size for h2 */
    font-size: clamp(1.6em, 6vw, 2.2em); /* Min 1.6em, preferred 6vw, max 2.2em */
    margin-top: calc(var(--spacing-unit) * 1.2);
    margin-bottom: calc(var(--spacing-unit) * 0.8);
}

h3 {
    /* Fluid font size for h3 */
    font-size: clamp(1.2em, 5vw, 1.7em); /* Min 1.2em, preferred 5vw, max 1.7em */
    color: var(--deeper-blue);
    margin-top: var(--spacing-unit);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

h4 {
    /* Fluid font size for h4 */
    font-size: clamp(1.1em, 4vw, 1.3em); /* Min 1.1em, preferred 4vw, max 1.3em */
    color: var(--text-color-dark);
    margin-top: calc(var(--spacing-unit) * 0.8);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

p {
    margin-bottom: var(--spacing-unit);
    /* Basic fluid font size for paragraph */
    font-size: clamp(1rem, 2vw, 1.1rem); /* Min 1rem, preferred 2vw, max 1.1rem */
}

/* Optional: Media queries for specific breakpoints if clamp isn't enough or for layout changes */
@media (max-width: 768px) {
    /* Styles for tablets and smaller screens */
    .container {
        border-radius: 4px; /* Slightly smaller radius for smaller screens */
    }
    h1 {
        padding-bottom: var(--spacing-unit);
        margin-bottom: calc(var(--spacing-unit) * 1.5);
    }
}

@media (max-width: 480px) {
    /* Styles for mobile phones */
    body {
        /* Slightly adjust base font size for very small screens if needed */
        font-size: 0.95em;
    }
    .container {
        margin: var(--spacing-unit) auto; /* Reduce top/bottom margin further */
        padding: calc(var(--spacing-unit) * 0.8); /* Reduce padding further */
        box-shadow: none; /* Optionally remove box-shadow on very small screens */
    }
}
ul, ol {
    margin-left: 20px;
    margin-bottom: 10px;
}
ul {
    list-style-type: disc;
}
ol {
    list-style-type: decimal;
}
.card {
    background-color: #e3f2fd; /* Light blue */
    border-left: 5px solid #2196f3; /* Blue border */
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.container img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 0.9em;
    text-align: left;
}
table th, table td {
    border: 1px solid #ddd;
    padding: 8px;
}
table th {
    background-color: #f2f2f2;
    font-weight: bold;
    color: #555;
}
table tr:nth-child(even) {
    background-color: #f9f9f9;
}
table tr:hover {
    background-color: #f0f0f0;
}

/* --- In-Page Navigation (formerly spatial menu) Styles --- */
#in-page-nav {
    display: flex;
    justify-content: center; /* Center the navigation items horizontally */
    flex-wrap: nowrap; /* Prevent wrapping on small screens, allow horizontal scroll */
    overflow-x: auto; /* Enable horizontal scrolling for overflow */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    padding: 10px 0;
    margin-bottom: 30px; /* Space below the navigation */
    background-color: #e8f0fe; /* Very light blue for the nav bar */
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #bbdefb #f1f1f1; /* Firefox */
}

#in-page-nav::-webkit-scrollbar {
    height: 8px;
}

#in-page-nav::-webkit-scrollbar-thumb {
    background-color: #bbdefb; /* Light blue for scroll thumb */
    border-radius: 10px;
    border: 2px solid #e8f0fe;
}

#in-page-nav::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    border-radius: 10px;
}

#in-page-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    white-space: nowrap; /* Keep items in a single line */
}

#in-page-nav li {
    margin: 0 8px; /* Space between items */
    flex-shrink: 0; /* Prevent items from shrinking */
}

#in-page-nav .mdc-button {
    text-decoration: none;
    color: #3f51b5; /* Deeper blue for text */
    padding: 8px 12px;
    border-radius: 20px; /* Pill-shaped buttons */
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    align-items: center;
    font-size: 0.9em;
    font-weight: 500;
    border: 1px solid #c5cae9; /* Subtle border */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

#in-page-nav .mdc-button:hover {
    background-color: #e0e7fa; /* Lighter blue on hover */
    color: #1a73e8; /* Google Blue on hover */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#in-page-nav .mdc-button__icon {
    margin-right: 6px; /* Smaller space for icons */
    font-size: 18px; /* Slightly smaller icons */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #in-page-nav {
        justify-content: flex-start; /* Align to start for scrolling */
        padding: 10px 15px; /* Add horizontal padding for scroll indicator */
    }
}

/* --- Responsive Table Styles --- */
.table-responsive {
    overflow-x: auto; /* Enables horizontal scrolling for the table */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    margin: 20px 0; /* Maintain original margin */
    border-radius: 8px; /* Match container border-radius */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Subtle shadow for the container */
}

.table-responsive table {
    min-width: 600px; /* Ensure table has a minimum width to trigger scroll */
    width: 100%; /* Make sure table takes full width of its container */
    margin: 0; /* Remove parent margin as it's now on .table-responsive */
}

/* Adjust table font size for smaller screens if needed */
@media (max-width: 600px) {
    .table-responsive table {
        font-size: 0.8em; /* Slightly smaller font for very small screens */
    }
}
/* Top App Bar base styles */
#app-bar { /* Or .mdc-top-app-bar if preferred, but ID is more specific */
  position: fixed; /* Ensures it stays at the top */
  top: 0;
  left: 0;
  width: 100%; /* Takes full width initially */
  z-index: 100;  /* Above map content, below drawer/dialogs */
  /* Background color and other properties are typically handled by MDC default styles */
  /* or can be customized here if needed, e.g., background-color: var(--mdc-theme-primary); */
  transition: left 0.3s ease-in-out, width 0.3s ease-in-out; /* Added transitions */
}

/* Make main content area fill viewport height */
.mdc-drawer-app-content {
  height: 100vh;
  overflow: hidden; /* Prevent this container from showing scrollbars due to 100vh height */
  /* Note: margin-left is adjusted in @media (min-width: 960px) for desktop drawer */
}

.mdc-top-app-bar--fixed-adjust {
  /* This class is typically used to add padding-top to content below a fixed top app bar. */
  /* To make its child (main.mdc-layout-grid) fill remaining height, it needs to be full height itself. */
  height: 100%;
  display: flex; /* Make it a flex container */
  flex-direction: column; /* Stack its children (main.mdc-layout-grid) vertically */
  width: 100%; /* Ensure it takes full width */
}

/* Flexbox styles for main content layout */
.mdc-top-app-bar--fixed-adjust > main.mdc-layout-grid { /* Assuming main is direct child */
  display: flex;
  flex-direction: column;
  height: 100%; /* Fill the height of .mdc-top-app-bar--fixed-adjust */
  width: 100%; /* Ensure it takes full width */
}

#controls-section {
  /* This section should not grow, it contains overlays which are absolutely positioned */
  flex-shrink: 0; /* Prevent this section from shrinking if content is too much */
  width: 100%; /* Ensure it takes full width if it contains block elements that need it */
}

#map-section {
  flex-grow: 1; /* Allows this section to take available vertical space */
  display: flex;
  flex-direction: column;
  min-height: 0; /* Important for flex children that need to shrink properly */
  width: 100%; /* Ensure it takes full width */
}

#map-container-cell {
  flex-grow: 1; /* Make cell take up all space within #map-section */
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%; /* Ensure it takes full width */
}

/* #map-container already has a rule, will modify it to ensure height: 100% */


/* Styles for Material Design Cards */
.mdc-card {
  width: 100%; /* Fill the grid cell */
  padding: 16px;
  box-sizing: border-box; /* Include padding in width/height calculation */
}

/* Ensure content within cards, like text fields and buttons, have some breathing room if needed */
.mdc-card .mdc-text-field {
  margin-bottom: 8px; /* Default MDC might already do this, but ensures consistency */
}

.mdc-card .mdc-button {
  margin-top: 8px; /* Add some space above buttons if they follow other elements */
}

#map-container {
  cursor: pointer; /* Change cursor to pointer for the map */
  position: relative; /* Establish stacking context */
  z-index: 0;         /* Set base z-index */
  height: 100%;       /* Make map fill its container cell */
  width: 100%;        /* Ensure width is also 100% */
}

.info-card-text {
  text-align: center;
  font-size: 0.9em;
  color: var(--mdc-theme-text-secondary-on-background, #555); /* Using a secondary text color */
  line-height: 1.5;
}

#digipin-display {
  margin-top: 8px; /* Adjusted from 15px, assuming card padding handles some of it */
  padding: 10px;
  background-color: #e9ecef; /* This light gray is fine */
  border-radius: 4px;
  text-align: center;
  font-weight: bold;
  min-height: 20px; /* Good to keep */
}

/* Leaflet Geocoder input specific styling if needed */
/* This might need adjustment if MDC Text Field is used for geocoder, but Leaflet's control is separate */
.leaflet-control-geocoder-form input {
     width: calc(100% - 30px); /* Adjust if default is too wide/small */
     padding: 8px !important;
     margin-bottom: 0 !important;
}

/* QR Code Modal (MDC Dialog) specific display element styling */
/* The main .modal, .modal-content, .close-button styles are removed as MDC Dialog handles this */
#qrcode-display { /* This ID is re-used in the MDC Dialog's content area */
    margin: 20px auto;
    width: fit-content;
}
#qrcode-display img { /* qrcode.js generates an img or canvas */
    display: block;
    margin: auto;
}

/* Custom Leaflet Popup Styling */
.custom-popup {
    padding: 5px;
    max-width: 280px;
    text-align: left;
    line-height: 1.4;
    /* Font will be inherited from mdc-typography on body or Leaflet's defaults.
       Can be overridden here if needed. */
}

.custom-popup h4 {
    margin-top: 0; /* Reduced from 5px, popup padding will handle it */
    margin-bottom: 8px; /* Reduced from 10px */
    font-size: 1.15em; /* Slightly larger for emphasis */
    color: var(--mdc-theme-text-primary-on-background);
    border-bottom: 1px solid #eee; /* Add a subtle separator */
    padding-bottom: 8px; /* Space for the separator */
}

.custom-popup p {
    margin: 8px 0; /* Increased spacing for readability */
}

.custom-popup .digipin-value {
    font-size: 1.35em; /* Slightly larger */
    font-weight: bold;
    color: var(--mdc-theme-primary);
    margin-top: 4px; /* Added margin top */
    margin-bottom: 12px; /* Increased margin bottom */
    text-align: center;
    display: block; /* Ensure it takes full width for centering */
}

.custom-popup .coords,
.custom-popup .accuracy {
    font-size: 0.9em; /* Slightly larger for better readability */
    color: var(--mdc-theme-text-secondary-on-background, #555); /* Use theme variable if available, fallback */
    line-height: 1.5;
    text-align: center; /* Center align for consistency */
}

/* Styling for the container of icon buttons within the popup */
.custom-popup .popup-actions {
    margin-top: 12px; /* Reduced from 15px */
    padding-top: 8px;  /* Reduced from 10px */
    border-top: 1px solid var(--mdc-theme-background, #eee); /* Use theme variable */
    /* Flex styles are still managed by inline styles in JS for now, which is fine for dynamic content */
}

/*
   Styling for .popup-action-button was removed as these buttons are now
   <button class="mdc-icon-button material-icons">.
   Their styling will come from MDC Icon Button component styles.
   If specific overrides are needed for icon buttons *within the popup*, they can be added here,
   e.g., by targeting '.custom-popup .mdc-icon-button'.
   For now, we rely on default MDC Icon Button appearance.
*/

/*------------------------------------*\
    MDC Drawer and Navigation
\*------------------------------------*/

/* 1. Drawer Positioning and Basic Styling */
.mdc-drawer--dismissible {
  position: fixed; /* Or absolute if .mdc-drawer-app-content is the offset parent */
  top: 0; /* Align to top, or adjust if under a non-fixed top app bar */
  left: 0;
  height: 100vh;
  z-index: 200; /* Above map (Leaflet default z-index for panes is < 200) */
  background-color: var(--mdc-theme-surface, #ffffff);
  border-right: 1px solid rgba(0,0,0,0.12);
  transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
  width: 256px; /* Default MDC drawer width, can be adjusted */
}

/* Ensure the drawer is not visible by default if it's dismissible and starts closed */
/* This depends on JS adding .mdc-drawer--open. If it should be open by default on desktop, remove this. */
.mdc-drawer--dismissible:not(.mdc-drawer--open) {
  transform: translateX(-100%);
}


/* 6. Drawer Header Styling */
.mdc-drawer__header {
  padding: 16px;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  /* Using MDC typography for title/subtitle is recommended if not already applied in HTML */
}
.mdc-drawer__title {
  font-size: 1.25rem; /* Or use MDC typography scale e.g. var(--mdc-typography-headline6-font-size) */
  margin-bottom: 4px;
}
.mdc-drawer__subtitle {
  font-size: 0.875rem; /* Or use MDC typography scale e.g. var(--mdc-typography-caption-font-size) */
  color: var(--mdc-theme-text-secondary-on-background, rgba(0,0,0,0.6));
}

/* 4. Menu Items Styling (.mdc-list-item within drawer) */
.mdc-drawer .mdc-list-item {
  padding: 0 16px; /* Consistent padding */
  height: 48px; /* Standard list item height */
  display: flex;
  align-items: center;
}

.mdc-drawer .mdc-list-item .mdc-list-item__graphic {
  color: var(--mdc-theme-text-secondary-on-background, rgba(0,0,0,0.6)); /* Icon color */
  margin-right: 32px; /* Space between icon and text, MDC default is 16px if text is primary line */
}

.mdc-drawer .mdc-list-item .mdc-list-item__text {
  color: var(--mdc-theme-text-primary-on-background, #333333);
}

/* Active and Hover states for menu items */
.mdc-drawer .mdc-list-item--activated,
.mdc-drawer .mdc-list-item:focus { /* Adding focus for keyboard nav */
  background-color: rgba(0, 0, 0, 0.08); /* Subtle background for activation/focus */
}

.mdc-drawer .mdc-list-item--activated .mdc-list-item__graphic,
.mdc-drawer .mdc-list-item--activated .mdc-list-item__text {
  color: var(--mdc-theme-primary, #0057b3); /* Primary color for text and icon */
}

.mdc-drawer .mdc-list-item:hover {
  background-color: rgba(0, 0, 0, 0.04); /* Subtle hover */
}


/* 2. Drawer States (Dismissed/Shrunk for Desktop) */
/* Custom shrunk state */
.mdc-drawer--shrunk.mdc-drawer--dismissible {
  width: 60px; /* Width for icon-only view */
  overflow-x: hidden; /* Hide text that might overflow during transition */
  transform: translateX(0%); /* Ensure it's visible */
}

.mdc-drawer--shrunk .mdc-drawer__header {
  /* Optionally hide or restyle header in shrunk mode */
  padding: 8px; /* Reduced padding */
  text-align: center;
}
.mdc-drawer--shrunk .mdc-drawer__title,
.mdc-drawer--shrunk .mdc-drawer__subtitle {
  display: none; /* Hide header text */
}

.mdc-drawer--shrunk .mdc-list-item__text {
  display: none; /* Hide text in shrunk mode */
}

.mdc-drawer--shrunk .mdc-list-item {
  padding: 0; /* Remove padding to center icon */
  justify-content: center; /* Center icon horizontally */
}

.mdc-drawer--shrunk .mdc-list-item .mdc-list-item__graphic {
  margin-right: 0; /* No margin as text is hidden */
  /* Ensure icon is centered if its size is smaller than item height */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* 3. Drawer Modal State (for Mobile) - Scrim */
/* This scrim is usually a separate div, but let's style it in case it's added by JS */
.mdc-drawer-scrim {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.32); /* Standard scrim color */
  z-index: 199; /* Below drawer, above rest of content */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.mdc-drawer-scrim.mdc-drawer-scrim--open {
  opacity: 1;
  visibility: visible;
}

/* On mobile, drawer might take full width or most of it. */
/* This is often handled by MDC JS by adding/removing --modal or changing classes. */
/* If drawer becomes modal, it should be above the scrim. */
@media (max-width: 839px) { /* Typical breakpoint for MDC drawer to become modal */
  /* If JS doesn't make it modal, we might need to force it here, */
  /* but ideally JS handles class changes for --modal. */
  /* For a dismissible that acts modal: */
  .mdc-drawer--dismissible.mdc-drawer--open {
      /* It will already be translateX(0) if open */
      /* May need to ensure it's above scrim if z-index is an issue */
  }
}


/* 5. Top App Bar Adjustments */
/* Styling for the burger menu icon if needed */
#menu-toggle-button {
  color: var(--mdc-theme-on-primary, white); /* Ensure it's visible on app bar */
  /* Padding and size are usually handled by mdc-icon-button */
  flex-shrink: 0; /* Prevent the button itself from shrinking */
}

/* Prevent the section containing the menu button from shrinking */
.mdc-top-app-bar__section--align-start {
  flex-shrink: 0;
}

/*------------------------------------*\
    Content Overlays
\*------------------------------------*/
:root {
  --top-app-bar-height: 64px; /* Adjust if dynamic or different for mobile/desktop */
  --mdc-drawer-shrunk-width: 60px;
  --mdc-drawer-full-width: 256px;
  --overlay-default-left-margin: 16px; /* Space from drawer/screen edge */
}

.content-overlay {
  display: none; /* Hidden by default, shown by --active class */
  position: absolute;
  z-index: 150; /* Lower than drawer (200), higher than map default */
  box-sizing: border-box;
  background-color: var(--mdc-theme-surface, #ffffff);
  /* .mdc-card class already provides shadow and border-radius */
  /* padding is handled by inner div in HTML for overlays */
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.3s cubic-bezier(0.0, 0.0, 0.2, 1),
              transform 0.3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.content-overlay--active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.content-overlay .mdc-typography--headline6 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px; /* Space below title */
}

.content-overlay .mdc-icon-button[data-action="close-overlay"] {
  /* float:right was in HTML, but flex is cleaner */
  color: var(--mdc-theme-text-secondary-on-background);
}

/* Desktop Overlay Positioning and Sizing */
@media (min-width: 960px) {
  .content-overlay {
    top: calc(var(--top-app-bar-height) + var(--overlay-default-left-margin));
    /* Default left assuming shrunk drawer */
    left: calc(var(--mdc-drawer-shrunk-width) + var(--overlay-default-left-margin));
    width: 380px; /* MODIFIED FROM 320px to 380px */
    max-height: calc(100vh - var(--top-app-bar-height) - (2 * var(--overlay-default-left-margin)));
    overflow-y: auto;
  }

  /* Adjust left when drawer is fully open */
  .mdc-drawer--open:not(.mdc-drawer--shrunk) ~ .mdc-drawer-app-content .content-overlay {
    left: calc(var(--mdc-drawer-full-width) + var(--overlay-default-left-margin));
  }
   /* Or, if overlays are direct children of mdc-drawer-app-content, and drawer is sibling: */
  /* .mdc-drawer--open:not(.mdc-drawer--shrunk) + * .content-overlay { */
    /* left: calc(var(--mdc-drawer-full-width) + var(--overlay-default-left-margin)); */
  /* } */

  /* Adjust main content margin based on drawer state on desktop */
  .mdc-drawer-app-content { /* Default state, drawer closed or not applicable */
    margin-left: 0;
    transition: margin-left 0.3s ease-in-out;
  }

  .mdc-drawer--dismissible.mdc-drawer--open.mdc-drawer--shrunk ~ .mdc-drawer-app-content {
    margin-left: var(--mdc-drawer-shrunk-width, 60px);
  }

  .mdc-drawer--dismissible.mdc-drawer--open:not(.mdc-drawer--shrunk) ~ .mdc-drawer-app-content {
    margin-left: var(--mdc-drawer-full-width, 256px);
  }

  /* Obsolete #app-bar adjustment rules based on body classes were removed. */
  /* The #app-bar will now always be full width (left: 0; width: 100%;) as per its global style. */
  /* The drawer on desktop floats on top of the content (and potentially the app bar if z-indices were different). */
  /* With current z-indices: drawer (200) > app-bar (100) > content. */
  /* So, the drawer (when not modal/mobile) will appear to float over the left edge of the app-bar. */

  /* Adjust drawer position for desktop to be below the top app bar */
  .mdc-drawer--dismissible {
    margin-top: var(--top-app-bar-height, 64px);
    height: calc(100vh - var(--top-app-bar-height, 64px));
    /* Transitions for transform and width are inherited from the global .mdc-drawer--dismissible rule */
  }
}

/* Mobile Overlay Positioning and Sizing */
@media (max-width: 959px) {
  .content-overlay {
    top: var(--top-app-bar-height);
    left: 0;
    right: 0;
    width: 100%;
    max-height: calc(100vh - var(--top-app-bar-height));
    border-radius: 0; /* Full width, no radius */
    /* box-shadow: none; /* Optional: remove shadow for full-width modal feel */
    /* Ensure map section is not interactive when overlay is active on mobile */
    /* This might need JS to add a class to map-section */
  }
  .content-overlay--active ~ #map-section {
    /* display: none; /* Example: hide map when overlay is active on mobile */
    /* Or pointer-events: none; */
  }
}


/* Media Queries for Responsiveness */
@media (max-width: 599px) {
  .info-card-text {
    text-align: left; /* Keep this if it improves readability for this element */
  }

  .mdc-top-app-bar__title {
    font-size: 1rem; /* Reduce default title size on very small screens */
  }

  /* Target the inner div with padding inside content overlays */
  .content-overlay > div[style*="padding:16px"] {
    padding: 12px !important; /* Reduce padding; !important might be needed to override inline style */
  }

  /* Adjust custom popup text sizes for very small screens */
  .custom-popup h4 {
    font-size: 1.05em; /* Slightly smaller */
    padding-bottom: 6px;
    margin-bottom: 6px;
  }
  .custom-popup .digipin-value {
    font-size: 1.2em; /* Slightly smaller */
    margin-bottom: 10px;
  }
  .custom-popup .coords,
  .custom-popup .accuracy {
    font-size: 0.85em; /* Slightly smaller */
  }
  .custom-popup .popup-actions {
    margin-top: 10px;
    padding-top: 6px;
  }

  /* Font size adjustments within content overlays for very small screens */
  .content-overlay .mdc-typography--headline6 {
    font-size: 1.1rem; /* Slightly reduce headline size in overlays */
  }

  .content-overlay .mdc-floating-label {
    font-size: 0.9rem; /* Reduce floating label size in overlays */
  }

  .content-overlay .mdc-text-field__input {
    font-size: 0.95rem; /* Reduce text field input text size in overlays */
  }

  .content-overlay .mdc-button .mdc-button__label {
    font-size: 0.85rem; /* Reduce button text size in overlays */
  }
}

/* Example of how you might adjust MDC icon buttons specifically within the custom popup if needed: */
/*
.custom-popup .mdc-icon-button {
  color: var(--mdc-theme-primary); // Example: Make icons use primary theme color
  width: 36px; // Adjust size if needed
  height: 36px;
}

.custom-popup .mdc-icon-button:hover {
  background-color: rgba(0, 0, 0, 0.04); // Standard hover for icon buttons
}
*/


/* Base styles for figure and images */
figure {
  display: flex; /* Enables flexbox for the figure */
  flex-wrap: wrap; /* Allows images to wrap if needed */
  justify-content: center; /* Centers images horizontally */
  gap: 10px; /* Adds some space between images */
}

figure img {
  flex-grow: 1; /* Allows images to grow and fill space */
  object-fit: contain; /* Ensures the entire image is visible within its bounds */
  max-width: 100%; /* Prevents images from overflowing their container */
  height: auto; /* Maintains aspect ratio */
}

/* Style for when there are two images */
figure:has(img + img) img {
  flex-basis: calc(50% - 5px); /* Approximately 50% width minus half of the gap */
  max-width: calc(50% - 5px); /* Ensures it doesn't grow beyond 50% */
}

/* Style for when there is one image (default behavior, but explicitly set for clarity) */
figure:not(:has(img + img)) img {
  flex-basis: 100%;
  max-width: 100%;
}

figcaption {
  width: 100%; /* Ensures caption spans the full width */
  text-align: center;
  margin-top: 10px; /* Space above caption */
}

/* Custom Autocomplete Styles */
.mdc-text-field { /* Ensure the parent of the input can be a positioning context */
    position: relative; /* This might be needed for absolute positioning of suggestions. Often already set by MDC. */
}

.autocomplete-suggestions {
  position: absolute;
  /* top, left, width will be set by JS */
  background-color: var(--mdc-theme-surface, white);
  border: 1px solid var(--mdc-theme-text-secondary-on-background, #ccc);
  /* border-top: none; /* Consider if this is still needed or if full border is okay */
  z-index: 1050; /* Ensure it's above other card content and potentially other overlays */
  max-height: 200px;
  overflow-y: auto;
  display: none; /* Initially hidden */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  list-style: none; /* Ensure no list bullets if structure changes */
  padding: 0; /* Reset padding */
  margin: 0; /* Reset margin */
  box-sizing: border-box; /* Include border in width calculation by JS */
}

.autocomplete-suggestions .suggestion-item {
  padding: 10px 16px; /* Match MDC list item padding if desired */
  cursor: pointer;
  font-size: 0.95rem; /* Consistent with input text font size in overlays on mobile */
  color: var(--mdc-theme-text-primary-on-background, #333);
}

.autocomplete-suggestions .suggestion-item:hover {
  background-color: rgba(0,0,0,0.04); /* Standard hover, similar to MDC list items */
}


/* --- Additions for New UI --- */

/* Main Layout Structure */
.main-content-container {
  display: flex;
  height: 100%;
  width: 100%;
}

.control-panel {
  width: 380px;
  flex-shrink: 0;
  height: 100%;
  overflow-y: auto;
  border-left: none;
  border-top: none;
  border-bottom: none;
  border-radius: 0;
}

#map-container {
  flex-grow: 1;
  height: 100%;
}

/* Tab Content Styling */
.tab-content-container {
  padding: 16px;
}
.tab-content {
  display: none;
}
.tab-content--active {
  display: block;
}

/* Two-line list item styling in viewer */
.mdc-list-item__start-detail {
    margin-right: 16px;
    color: var(--mdc-theme-primary);
}

/* Responsiveness for new layout */
@media (max-width: 840px) {
  .main-content-container {
    flex-direction: column;
  }
  .control-panel {
    width: 100%;
    height: auto; /* Let content define height */
    max-height: 50vh; /* Don't take more than half the screen */
    border-right: none;
    border-bottom: 1px solid rgba(0,0,0,0.12);
  }
  #map-container {
    height: 100%; /* Take remaining space */
  }
}

/* Footer Styles */
#app-footer {
  background-color: #333;
  color: #fff;
  padding: 5px; /* Reduced padding slightly */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
}

.footer-content-wrapper {
  display: flex;
  justify-content: space-between; /* Copyright left, links + button right */
  align-items: center;
  width: 100%;
  max-width: 1200px; /* Optional: constrain width */
  margin: 0 auto; /* Center wrapper if max-width is used */
}

#app-footer .copyright {
  margin: 0;
  font-size: 0.9em;
  text-align: left; /* Copyright text to the left on desktop */
}

#app-footer .footer-links {
  list-style: none;
  padding: 0;
  margin: 0; /* Reset margin, flexbox handles spacing */
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end; /* Align links to the right of their container */
  align-items: center; /* Align items if button and links have different heights */
  gap: 15px;
}

#app-footer .footer-links li {
  display: inline; /* Flex items are inline-block like by default */
}

#app-footer .footer-links a {
  color: #fff;
  text-decoration: none;
  padding: 5px 0; /* Padding for clickable area */
  font-size: 12px;
}

#app-footer .footer-links a:hover {
  text-decoration: underline;
}

.footer-expand-button {
  display: none; /* Hidden on desktop */
  color: #fff;
  /* Assuming standard MDC icon button size and ripple will apply */
}

/* Adjust body padding (ensure this doesn't conflict with previous body rule) */
/* The body rule was updated in a previous step to include padding-bottom: 80px */
/* We'll keep that as is, it should be sufficient for expanded mobile footer too. */
/* body {
  padding-bottom: 80px; /* Default padding for taller footers with wrapped links */
/* } */


@media (max-width: 480px) {
  #app-footer {
    padding: 8px 0px; /* Slightly reduce padding for small screens */
  }

  #app-footer .footer-content-wrapper {
    flex-direction: row; /* Changed from column */
    flex-wrap: wrap; /* Added */
    justify-content: space-between; /* Added */
    align-items: center; /* Remains */
  }

  .footer-expand-button {
    display: inline-flex; /* Remains: Show the button on mobile */
    /* order: 0; Removed */
    /* margin-bottom: 8px; Removed */
    /* Ensure MDC styles are applying - if not, might need !important or more specific selectors */
  }

  /* This rule applies to .footer-links whether it's expanded or not, for its base structure when displayed */
  #app-footer .footer-links {
    /* display: none; /* This is still default state, toggled by .footer-expanded */
    flex-direction: column; /* Links stack vertically when shown */
    align-items: center; /* Center links */
    gap: 8px; /* Remains */
    /* order: 1; Removed */
    /* margin-top: 0; This was for when it was part of the same column flow */
    width: 100%; /* Added: Make links take full width to drop below */
    margin-top: 8px; /* Added: Space from copyright/button line */
  }

  /* This rule specifically handles showing the links */
  #app-footer.footer-expanded .footer-links {
    display: flex; /* Show links when footer is expanded */
  }

  /* Default state for .footer-links on mobile if not expanded */
  #app-footer:not(.footer-expanded) .footer-links {
    display: none;
  }

  #app-footer .copyright {
    text-align: left; /* Changed from center */
    /* order: 2; Removed */
    /* margin-top: 8px; Removed */
    flex-grow: 1; /* Added: allow copyright to take available space */
    padding: 0px 20px;
  }

  /* body padding for mobile:
     The existing global padding-bottom: 80px should be okay.
     If collapsed footer is very short (e.g. button + copyright ~ 40-50px),
     there will be some extra space, which is acceptable.
     If expanded footer (button + links + copyright) gets taller than 80px,
     then this padding might need to be increased, or a JS class to adjust it.
     For now, we rely on 80px being a reasonable average.
  */
  /* Example for JS-controlled body padding adjustment:
  body.footer-is-expanded-on-mobile {
    padding-bottom: 140px; /* Or whatever height the fully expanded footer takes */
  /* } */
}


/* Spatial Side Menu */
.spatial-side-menu {
    position: fixed;
    top: 50%; /* Center vertically */
    left: 0; /* Or 'right: 0;' for a right-aligned menu */
    transform: translateY(-50%); /* Adjust to truly center */
    background-color: rgba(26, 115, 232, 0.9); /* Google Blue with some transparency */
    padding: 10px 5px;
    border-radius: 0 8px 8px 0; /* Rounded corners on the visible side */
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    z-index: 999;
}

.spatial-side-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.spatial-side-menu li {
    margin-bottom: 10px;
}

.spatial-side-menu a {
    display: flex;
    flex-direction: column; /* Stack icon and text */
    align-items: center;
    text-decoration: none;
    color: white;
    font-size: 0.8em; /* Smaller text */
    padding: 8px 5px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.spatial-side-menu a:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Light hover effect */
}

.spatial-side-menu .material-icons {
    font-size: 24px; /* Icon size */
    margin-bottom: 2px;
}

.spatial-side-menu .menu-text {
    display: block; /* Ensure text is visible */
    text-align: center;
}
.centered-caption{
  text-align: center;
}

.LI-profile-badge{
  width: 100%;
  iframe {
    width: 100%;
    border: none; /* Remove default border */
  }
}