:root{--primary:#0d6efd;--light:#f8f9fa;--dark:#343a40;--bg-light:#fff;--bg-dark:#121212;--primary-gradient:linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%)}

body{
  font-family:'Segoe UI',sans-serif;
  background:var(--light);
  color:var(--dark);
  overscroll-behavior-y: none; /* Prevent pull-to-refresh and bounce on mobile */
}
body.dark-mode{background:var(--bg-dark);color:var(--bg-light)}
.hover-shadow:hover{box-shadow:0 4px 20px rgb(0 0 0 / 10%)}
.skeleton-container{display:grid;grid-template-columns:1fr;gap:1rem}
.skeleton-item{background:#e0e0e0;height:250px;border-radius:.5rem;animation:pulse 1.5s infinite}

@keyframes pulse{0%{opacity:1}50%{opacity:.4}100%{opacity:1}}
#client-column .client-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;margin-bottom:.5rem;background:var(--bg-light);border-radius:.5rem;transition:background .2s}
#client-column .client-item:hover{background:rgb(13 110 253 / 10%)}
.client-item-hidden-by-search {  display: none !important;}
.client-thumb{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--primary)}
.client-name{flex:1;font-size:.95rem}
.draggable{width:56px;height:56px;border-radius:50%;object-fit:cover;position:absolute;cursor:grab;border:3px solid var(--primary);transition:box-shadow .2s}
.draggable:hover{box-shadow:0 0 12px rgb(0 0 0 / 20%)}
.favorite{position:absolute;top:.5rem;right:.5rem;color:gold;cursor:pointer}
.staff-member { border: 2px solid #ffc107; }

/* Ensure client sidebar content itself does not scroll, forcing client-list to scroll */
#client-sidebar-content {
  /* height: 100%; is provided by .h-100 */

  /* display: flex; flex-direction: column; are provided by .d-flex .flex-column */
  overflow-y: hidden; /* This is the key addition */
}

/* Ensure client-list properly handles its own scrolling within the sidebar */
#client-list {
  /* flex-fill and overflow-auto are on the element via classes, */

  /* but being explicit here can help override or ensure behavior. */
  flex-grow: 1;
  overflow-y: auto;
}

/* Cross-browser mobile viewport height */
.h-100dvh {
  height: 100vh; /* Fallback */
  height: 100dvh;
}

/* iOS Input Zoom Prevention */
@media screen and (width <= 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* --- Cross-Browser & Mobile Drag/Drop & Performance Fixes --- */

/* Prevent scrolling/zooming interference during drag operations on touch devices */
#layout-container, .placed-client, .draggable {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none; /* Safari */
}

/* Performance optimizations for elements being transformed (dragged/zoomed) */
#layout-image-element, .placed-client {
    will-change: transform;
}

/* Drag Ghost Styling - critical for custom drag implementation */
.client-drag-ghost {
    position: fixed; /* Fixed relative to viewport */
    pointer-events: none; /* Allow events to pass through to underlying elements */
    z-index: 9999;
    opacity: 0.85;
    box-shadow: 0 4px 12px rgb(0 0 0 / 30%);
    touch-action: none;
}

/* Floating Floor Switcher */
#floor-switcher-floating-container {
    z-index: 1050; /* Above map (likely default or low), below modals (1055), toasts (1090) */
}

#floor-switcher-floating-container .btn-group-vertical {
    background: rgb(255 255 255 / 90%);
    backdrop-filter: blur(4px);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
    border: 1px solid var(--primary);
    overflow: hidden;
}

#floor-switcher-floating-container .btn {
    border: none; /* Cleaner look inside the group */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

#floor-switcher-floating-container .btn:hover {
    background-color: var(--light);
}

#floor-switcher-floating-container .btn:active {
    background-color: #e2e6ea;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

#floor-switcher-floating-container .btn.disabled,
#floor-switcher-floating-container .btn:disabled {
    color: #adb5bd;
    background-color: transparent;
    opacity: 0.6;
    pointer-events: none;
    box-shadow: none;
}

#floor-switcher-floating-container .floor-label {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
    cursor: default;
    background: var(--primary-gradient);
    color: #fff;
    border-top: none;
    border-bottom: none;
}

/* Hide native search clear button to avoid duplication with custom button */
#clientSearchInput::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* Sidebar Search Focus State */
.input-group:focus-within .input-group-text {
    border-color: #86b7fe;
}
.input-group:focus-within .form-control {
    border-color: #86b7fe;
}

/* Search Clear Button Focus Visibility */
#clearClientSearchBtn:focus,
#clearClientSearchBtn:focus-visible {
    outline: 2px solid #86b7fe;
    outline-offset: 2px;
    background-color: rgba(134, 183, 254, 0.1);
    border-radius: 50%;
}

/* Client Placed Indicator */
.client-placed-indicator {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: white;
    border-radius: 50%;
    color: #198754; /* Bootstrap success color */
    font-size: 1rem;
    line-height: 1;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Modal Profile Header */
.modal-profile-header {
    background: var(--primary-gradient);
}


/* Mobile Touch Feedback */
.touch-active {
    transform: scale(0.96);
    background-color: rgba(13, 110, 253, 0.1);
    transition: transform 0.1s ease, background-color 0.1s ease;
}


/* --- Skeleton Screens (Loading States) --- */

@keyframes skeleton-pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

.skeleton-bg {
    background-color: #e9ecef; /* Bootstrap gray-200 */
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 4px;
}

/* Map Skeleton */
.layout-loader-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f8f9fa;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.layout-loader-skeleton .skeleton-map-grid {
    width: 80%;
    height: 60%;
    background:
        linear-gradient(to right, #e9ecef 1px, transparent 1px),
        linear-gradient(to bottom, #e9ecef 1px, transparent 1px);
    background-size: 50px 50px;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    animation: skeleton-pulse 2s infinite;
}

/* Client List Skeleton */
.skeleton-list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: #fff;
    border-radius: 0.5rem;
    border: 1px solid #f8f9fa;
}

.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.skeleton-text-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skeleton-text {
    height: 12px;
    width: 60%;
}

.skeleton-text.short {
    width: 40%;
}

/* Layout Card Skeleton */
.skeleton-card {
    height: 100%;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    overflow: hidden;
    background: #fff;
}

.skeleton-card-img {
    width: 100%;
    height: 200px;
}

.skeleton-card-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.skeleton-card-title {
    height: 20px;
    width: 70%;
}

.skeleton-card-text {
    height: 14px;
    width: 90%;
}

/* --- Layout Card Improvements --- */
.layout-card-nav {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
  transform: translateY(0);
  border: 1px solid #dee2e6;
}

.layout-card-nav:hover {
  transform: translateY(-5px);
  box-shadow: 0 1rem 3rem rgba(0,0,0,0.175) !important;
  border-color: var(--primary) !important;
  cursor: pointer;
}

.layout-card-nav .card-img-top {
  border-bottom: 1px solid #dee2e6;
  transition: opacity 0.2s ease;
}

.layout-card-nav:hover .card-img-top {
  opacity: 0.95;
}

.view-layout-link {
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  margin-top: auto; /* Push to bottom */
  color: var(--primary);
  display: flex;
  align-items: center;
}

.view-layout-link i {
  margin-left: 4px;
  transition: transform 0.2s ease;
}

.layout-card-nav:hover .view-layout-link i {
  transform: translateX(4px);
}

/* Driver.js Custom Theme */
.driver-popover-theme {
  background-color: var(--bg-light);
  color: var(--dark);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  font-family: 'Segoe UI', sans-serif;
}

.driver-popover-theme .driver-popover-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.driver-popover-theme .driver-popover-description {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--dark);
}

/* Ensure buttons match theme */
.driver-popover-theme .driver-popover-footer button {
  background-color: var(--primary);
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.9rem;
  text-shadow: none;
}

.driver-popover-theme .driver-popover-footer button:hover {
  background-color: #0b5ed7; /* Darker primary */
}

/* Fix for dark mode if active */
body.dark-mode .driver-popover-theme {
  background-color: var(--bg-dark);
  color: var(--bg-light);
  border: 1px solid #444;
}
body.dark-mode .driver-popover-theme .driver-popover-description {
  color: #ccc;
}

/* --- Hint System Animations --- */
@keyframes hintFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.hint-fade-animation {
    animation: hintFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Ensure checkbox alignment matches theme */
#disable-hints-checkbox {
    accent-color: var(--primary);
    width: 14px;
    height: 14px;
}