/* General Mobile First Considerations */
body {
  overflow-x: hidden; /* Prevent horizontal scroll on mobile */
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight on some mobile browsers */
}

/* --- Navbar & Buttons --- */
.navbar-toggler {
  padding: 0.5rem 0.75rem; /* Increase tap area for navbar toggler */
  font-size: 1.25rem;
}

/* Ensure navbar brand and actions don't cause overflow */
.navbar-brand {
  min-width: 0; /* Allow truncation */
}

#navbar-actions-right {
  flex-shrink: 0; /* Prevent this group from shrinking too much */
}


.btn { /* General button touch target improvements */
  padding: 0.5rem 1rem; /* Ensure adequate padding */
  min-height: 44px; /* Minimum touch target height */
  min-width: 44px;  /* Minimum touch target width for icon-only buttons */
}

.btn-sm {
  padding: 0.35rem 0.75rem;
  min-height: 38px;
  min-width: 38px;
}

/* --- Sidebar client icons and general styling --- */
#client-sidebar-content #client-list img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 50% !important;
  cursor: grab;
  border: 1px solid #ddd;
  margin-bottom: 0.25rem; /* Space below image */
}

#client-sidebar-content #client-list > div[data-filename] { /* Wrapper for each client in sidebar */
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}


/* Placed clients on the layout */
.placed-client {
  width: 60px; /* Desktop default size */
  height: 60px; /* Desktop default size */
  object-fit: cover;
  border-radius: 50%;
  cursor: grab;
  position: absolute;
  border: 2px solid #0d6efd;
  box-sizing: border-box;
  transition: width 0.2s ease-in-out, height 0.2s ease-in-out; /* Smooth transition for size changes */
}

.staff-member {
  border-color: red;
}

/* Off-Canvas Sidebar and Main Content Adjustments */
.offcanvas-body #client-sidebar-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
}

/* Static sidebar on md and larger screens */
@media (width >= 768px) {
  #clientOffcanvas.offcanvas-md {
    position: static;
    transform: none;
    visibility: visible !important;
    border-right: 1px solid #dee2e6;
    width: 280px; /* Desired static width */
    flex-shrink: 0;
    max-height: 100%; /* Ensure sidebar doesn't overflow its container vertically */
    display: flex; /* Add this to make #clientOffcanvas a flex container */
    flex-direction: column; /* Stack its children (like .offcanvas-body) vertically */
  }

  #clientOffcanvas.offcanvas-md .offcanvas-body {
    padding: 1rem;
    overflow-y: hidden; /* Prevent this layer from scrolling */
    display: flex; /* Ensure it's a flex container for #client-sidebar-content */
    flex-direction: column; /* Stack children vertically */
    flex-grow: 1; /* Make .offcanvas-body take up available space in #clientOffcanvas */
    min-height: 0; /* Allow it to shrink if content is smaller, important for flex children */
  }

  /* Ensure #client-sidebar-content flexes correctly within the static .offcanvas-body */
  #clientOffcanvas.offcanvas-md .offcanvas-body > #client-sidebar-content {
    flex-grow: 1;
    min-height: 0; /* Allow shrinking for scrolling children */

    /* height: auto; */

 /* Removed to allow h-100 or other height settings to take precedence */

    /* Override height: 100% from the general rule if it exists, allow flex to determine height */
    overflow-y: hidden !important; /* Adding important temporarily for testing this hypothesis */
  }
}

/* Off-canvas specific width for smaller screens */
@media (width <= 767.98px) {
  #clientOffcanvas.offcanvas-start {
    width: 280px; /* Custom width for mobile off-canvas, adjust as needed */
  }
}


.offcanvas-body #client-list {
  flex: 1 1 0; /* Ensure it can shrink */ /* Start from 0 and grow; helps with large content */
  overflow-y: auto;
  min-width: 0;
  min-height: 0; /* Allow shrinking to enable scrolling */
  scrollbar-width: thin;
  scrollbar-color: rgb(0 0 0 / 30%) transparent;
}

.offcanvas-body #client-list::-webkit-scrollbar {
  width: 6px;
}

.offcanvas-body #client-list::-webkit-scrollbar-thumb {
  background-color: rgb(0 0 0 / 30%);
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.3s;
}

.offcanvas-body #client-list:hover::-webkit-scrollbar-thumb {
  opacity: 1;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

/* Class for hiding client items during search */
.client-item-hidden-by-search {
  display: none !important;
}

/* Layout Page Specific Styles */
#layout-container {
  position: relative;
  overflow: hidden;
  background-color: #e9ecef;
  cursor: grab;
  width: 100%;
  height: 100%;
  touch-action: none;
}

#layout-container.is-panning,
#layout-container.is-touch-interacting {
    cursor: grabbing;
}

#layout-image-element {
  position: absolute;
  transform-origin: 0 0;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

#client-list > div[data-filename] {
  /* Styles for client items directly in the list */
}

/* Context Menus - ensure they are usable on mobile if triggered */
.context-menu {
  min-width: 180px;
}

.context-menu .dropdown-item {
  padding: 0.5rem 1rem;
}


/* Adjustments for smaller screens using media queries */
@media (width <= 767.98px) {
  .navbar-brand {
    font-size: 0.9rem; /* Slightly smaller brand on mobile */
    margin-left: 0.5rem; /* Add some space if back button is very close */
  }

  .navbar-toggler { /* Ensure toggler has enough space */
    margin-left: 0.5rem;
  }

  main.flex-fill.p-3.p-md-4 {
    padding: 0.75rem !important;
  }

  #client-sidebar-content #client-list img {
    width: 45px;
    height: 45px;
  }

  .placed-client {
    width: 36px; /* 60% of 60px for mobile */
    height: 36px; /* 60% of 60px for mobile */
    border-width: 1.5px;
  }

  .modal-title {
    font-size: 1.1rem;
  }

  .offcanvas-header {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .offcanvas-body {
    padding: 0.75rem;
  }

  .offcanvas-body #client-sidebar-content {
     padding: 0;
  }
}

/* Styles to disable tooltips during drag operations */
.tooltips-disabled-during-drag .tooltip {
    display: none !important;
    pointer-events: none !important;
}

/* Ensure Bootstrap tooltips specifically are hidden if they are directly targeted or have specific classes */
.tooltips-disabled-during-drag [role="tooltip"],
.tooltips-disabled-during-drag .tooltip.show { /* .show is often used by Bootstrap to display tooltips */
    display: none !important;
    pointer-events: none !important;
}

/* Highlighting effect for "View on Layout" */
@keyframes popOut {
  0%, 100% {
    box-shadow: 0 0 5px rgb(0 0 0 / 20%);
  }

  50% {
    box-shadow: 0 0 20px 8px rgb(0 123 255 / 80%); /* More pronounced shadow */
  }
}

.highlight-client-view {
  animation: popOut 2.5s ease-in-out;

  /* Ensure it respects the existing border-radius if any, or set one if needed */

  /* border-radius: 50%; */

 /* Client icons are already round via .placed-client */
  z-index: 1050; /* Ensure it's above other elements, potentially even some modal backdrops if needed during animation */

  /* The border is already on .placed-client, the box-shadow in animation will be the primary visual cue */
}

.grayscale {
  filter: grayscale(100%);
}

/* Styles for Read-Only Snapshot View */
.snapshot-view-active #save-layout-btn,
.snapshot-view-active #undo-layout-btn,
.snapshot-view-active #redo-layout-btn,
.snapshot-view-active #adminPanelDropdown,
.snapshot-view-active #uploadClientBtnSidebar,
.snapshot-view-active .context-menu button:not(#ctx-client-details, #ctx-view-on-layout),
.snapshot-view-active .modal-footer .btn-primary,
.snapshot-view-active .modal-footer .btn-danger {
    pointer-events: none !important;
    opacity: 0.65 !important;
    cursor: not-allowed;
}

.snapshot-view-active .nav-link-confirm {
    pointer-events: all !important;
    opacity: 1 !important;
}

/* Client Drag Ghost - The element being dragged (mobile) */
.client-drag-ghost {
  position: fixed; /* Fixed relative to viewport */
  z-index: 9999;
  pointer-events: none; /* Let touches pass through to the container */
  opacity: 0.8;
  border: 2px solid dodgerblue;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgb(0 0 0 / 30%);
  width: 60px; /* Base size, JS might adjust */
  height: 60px;
}

/* Long Press Active - The visual cue before drag starts */
.client-long-press-active {
  animation: pulse-glow 0.8s infinite alternate;
  z-index: 1000 !important; /* Bring to front */
}

@keyframes pulse-glow {
  from {
    box-shadow: 0 0 0 0 rgb(13 110 253 / 40%);
    transform: scale(1);
  }

  to {
    box-shadow: 0 0 10px 5px rgb(13 110 253 / 70%);
    transform: scale(1.15);
  }
}