/* General Styles */

body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  display: block;
  background-color: #e0e0e0;
  /* Light background for neumorphism */
    color: #333;
}



/*hotfix for drag drop pwa problem*/
.thumbnail-bar img, .slot img {
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  cursor: grab;
}
/*hotfix for drag drop pwa problem*/



.captured-photo {
  max-width: 180px;
  max-height: 180px;
  margin: 10px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: var(--neumorphic-shadow);
}
.fullscreen-media {
  border-radius: 12px;
  box-shadow: var(--neumorphic-shadow);
}

.no-photo-warning {
  background: #f8f9fa;
  padding: 10px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  margin-top: 10px;
}

.no-photo-warning p {
  font-weight: bold;
  color: #333;
}

.capture-photo-btn, .upload-photo-btn {
  padding: 8px 12px;
  margin: 5px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
}

.capture-photo-btn {
  background: #007bff;
  color: white;
}

.upload-photo-btn {
  background: #28a745;
  color: white;
}

.capture-photo-btn:hover {
  background: #0056b3;
}

.upload-photo-btn:hover {
  background: #1e7e34;
}


/* Container Layout */
.container {
  display: flex;
  width: 100%;
}
.surgeryprint-button {
  display: inline-block;
  margin: 10px;
  padding: 12px 25px;
  background: #17a2b8;
  /* Blue-green color */
    color: white;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: background 0.3s, box-shadow 0.3s;
  box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
}

.surgeryprint-button:hover {
  background: #138496;
  /* Darker shade on hover */
    box-shadow: inset 4px 4px 8px #117a8b, inset -4px -4px 8px #17a2b8;
}

/* Sidebar Styles */
/* Add these styles to your existing CSS */
/* Both Sidebars */
/* Both Sidebars - Shared Styles */
/* Ensure both sidebars behave the same */
.sidebar-left, .sidebar-right {
  width: 25%;
  padding: 20px;
  background: #e0e0e0;
  border-radius: 16px;
  margin: 10px;
  box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

/* Scrollable Patient List (Left Sidebar) */
.patient-list {
  max-height: 700px;
  /* Set fixed height for consistency */
    overflow-y: auto;
  /* Enable scrolling */
    padding: 10px;
  background: #e0e0e0;
  border-radius: 16px;
  box-shadow: inset 4px 4px 8px #bebebe, inset -4px -4px 8px #ffffff;
}

/* Scrollable Interventions List (Right Sidebar) */
#intervention-view {
  max-height: 700px;
  /* Same as patient list */
    overflow-y: auto;
  padding-right: 10px;
  /* Space for scrollbar */;
}

/* ✅ Make Patient Info fit without scrollbars */
#patient-info-view {
  flex-grow: 1;
  /* Expand to fill space */
    overflow: hidden;
  /* Prevent any scrolling */
    width: 100%;
  padding-right: 0;
  /* Remove any unnecessary padding */
    display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Align content at the top */;
}

/* Ensure input fields fit properly */
.editable-input, .editable-textarea {
  width: 100%;
  /* Full width */
    box-sizing: border-box;
  /* Include padding in width calculation */
    padding: 10px;
  border-radius: 8px;
  background: #e0e0e0;
  border: none;
  box-shadow: inset 4px 4px 8px #bebebe, inset -4px -4px 8px #ffffff;
  transition: box-shadow 0.3s ease-in-out;
}

/* Prevent input fields from causing horizontal scroll */
.editable-input:focus, .editable-textarea:focus {
  outline: none;
  box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
}

/* Prevent overflow in patient info fields */
#patient-info-view .editable-input,
#patient-info-view .editable-textarea {
  max-width: 100%;
  /* Ensure inputs do not exceed sidebar width */
    white-space: nowrap;
  /* Prevent text from wrapping and causing overflow */;
}



/* Toggle Button */
.toggle-button {
  position: absolute;
  top: 20px;
  width: 40px;
  height: 40px;
  background: #e0e0e0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
  box-shadow: inset 4px 4px 8px #bebebe, inset -4px -4px 8px #ffffff;
  color: #007bff;
}
.toggle-button.right {
  left: -50px;
}
.toggle-button.left {
  right: -50px;
}

/* Main Content */
.main-content {
  width: 50%;
  padding: 20px;
  text-align: center;
}
h1 {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  text-shadow: 1px 1px 3px #fff;
}

/* Patient List */
.patient-list {
  margin-top: 20px;
  max-height: 400px;
  overflow-y: auto;
  padding: 10px;
  background: #e0e0e0;
  border-radius: 16px;
  box-shadow: inset 4px 4px 8px #bebebe, inset -4px -4px 8px #ffffff;
}
.patient-item {
  padding: 15px;
  background: #e0e0e0;
  border-radius: 10px;
  margin-bottom: 10px;
  box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.patient-item:hover {
  background: #d6d6d6;
  transform: translateY(-3px);
}
.patient-item.selected {
  background: #007bff;
  color: #fff;
  box-shadow: inset 4px 4px 8px #0056b3, inset -4px -4px 8px #0099ff;
}

/* Search and Filters */
.search-bar, .filters {
  margin-bottom: 20px;
}
.search-bar input, .filter-group select {
  padding: 10px;
  width: 100%;
  border: none;
  border-radius: 8px;
  background: #e0e0e0;
  box-shadow: inset 4px 4px 8px #bebebe, inset -4px -4px 8px #ffffff;
  outline: none;
}
.filter-group {
  margin-bottom: 15px;
}
.filter-group label {
  font-weight: bold;
  margin-right: 10px;
  color: #555;
}

/* Patient Photo Thumbnails */
.patient-photo {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  overflow-y: auto;
  max-height: 400px;
}
.patient-photo img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
}
.patient-photo img:hover {
  transform: scale(1.1);
  box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
}

/* Compare Button */
.compare-button {
  padding: 12px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
  font-weight: bold;
  transition: background 0.3s, box-shadow 0.3s;
}
.compare-button:hover {
  background: #0056b3;
  box-shadow: inset 4px 4px 8px #0056b3, inset -4px -4px 8px #007bff;
}

/* Patient Count */
.patient-count {
  font-weight: bold;
  color: #555;
  margin-top: 10px;
}

/* Intervention Groups */
.intervention-group {
  cursor: pointer;
  background: #e0e0e0;
  border-radius: 10px;
  padding: 15px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #555;
  box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
  transition: background 0.3s ease, transform 0.3s ease;
}
.intervention-group:hover {
  background: #d6d6d6;
  transform: translateY(-3px);
}
.intervention-group .intervention-name {
  margin-left: 10px;
}

/* Intervention Details */
.intervention-details {
  display: none;
  padding: 15px;
  border-radius: 10px;
  margin-top: 10px;
  background: #f9f9f9;
  box-shadow: inset 4px 4px 8px #bebebe, inset -4px -4px 8px #ffffff;
}
.date-item {
  padding: 10px;
  background: #e0e0e0;
  border-radius: 8px;
  margin-bottom: 5px;
  cursor: pointer;
  box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
  transition: all 0.3s ease;
}
.date-item:hover {
  background: #d6d6d6;
}
.date-item.selected {
  background: #007bff;
  color: #fff;
  box-shadow: inset 4px 4px 8px #0056b3, inset -4px -4px 8px #0099ff;
}


/* Add New Patient Button */
.add-patient-button {
  display: block;
  width: 90%;
  padding: 12px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  font-weight: bold;
  text-align: center;
  margin: 20px auto;
  transition: background 0.3s, box-shadow 0.3s;
  box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
}
.add-patient-button:hover {
  background: #45a049;
  box-shadow: inset 4px 4px 8px #367c39, inset -4px -4px 8px #4CAF50;
}

/* Capture Page */
.capture-container {
  width: 50%;
  margin: 50px auto;
  padding: 20px;
  background: #e0e0e0;
  border-radius: 16px;
  box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
  text-align: center;
}
.video-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
video {
  border-radius: 16px;
  box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
}
.capture-button {
  padding: 12px;
  background: #ff9800;
  color: white;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s, box-shadow 0.3s;
  box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
}
.capture-button:hover {
  background: #e68900;
  box-shadow: inset 4px 4px 8px #b36a00, inset -4px -4px 8px #ff9800;
}

/* Photo Carousel */
.photo-carousel {
  display: flex;
  overflow-x: auto;
  padding: 10px;
  gap: 10px;
  max-width: 100%;
  justify-content: center;
}
.captured-video {
  border: 2px dashed #888;
  padding: 4px;
}

.captured-photo {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
}
.captured-photo:hover {
  transform: scale(1.1);
}

/* Delete Photo Button */
.delete-photo-button {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  background: red;
  color: white;
  border: none;
  border-radius: 50%;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}
.delete-photo-button:hover {
  background: darkred;
}

/* Finish Button */
.finish-button {
  padding: 12px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s, box-shadow 0.3s;
  box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
  margin-top: 20px;
}
.finish-button:hover {
  background: #0056b3;
  box-shadow: inset 4px 4px 8px #0056b3, inset -4px -4px 8px #007bff;
}

/* Form Container (For Add Patient & Patient Details) */
.form-container {
  width: 50%;
  margin: 50px auto;
  padding: 20px;
  background: #e0e0e0;
  border-radius: 16px;
  box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
  text-align: center;
}
.form-container input, .form-container select {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  border: none;
  border-radius: 8px;
  background: #e0e0e0;
  box-shadow: inset 4px 4px 8px #bebebe, inset -4px -4px 8px #ffffff;
  outline: none;
}

/* butoanee switch*/

/* Dropdown Container */


/* Modal Background */

.modal {
  display: none;
  /* Hidden by default */
    position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  max-width: 90%;
  background: #e0e0e0;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
  text-align: center;
  z-index: 1002;
  /* 🛑 Ensure it appears above everything */;
}

/*ensure the Dark Overlay Covers Everything */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1001;
  /* 🛑 Make sure it's below the modal but above other content */;
}

/* close Button for Modals */
.modal .close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 22px;
  cursor: pointer;
}

/* ensure Buttons Work and Look Good */
.modal button {
  width: 100%;
  padding: 15px;
  margin: 10px 0;
  border: none;
  border-radius: 16px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease-in-out;
  box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
}

/* 📂 Upload Button */
.modal button:nth-child(2) {
  background: #007bff;
  color: white;
}
.modal button:nth-child(2):hover {
  background: #0056b3;
  box-shadow: inset 4px 4px 8px #0056b3, inset -4px -4px 8px #007bff;
}

/* 📸 Capture Button */
.modal button:nth-child(3) {
  background: #28a745;
  color: white;
}
.modal button:nth-child(3):hover {
  background: #1e7e34;
  box-shadow: inset 4px 4px 8px #1e7e34, inset -4px -4px 8px #28a745;
}

/* ⏭ Skip Button */
.modal button:nth-child(4) {
  background: #6c757d;
  color: white;
}
.modal button:nth-child(4):hover {
  background: #545b62;
  box-shadow: inset 4px 4px 8px #545b62, inset -4px -4px 8px #6c757d;
}




/* Dropdown Container */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Button */
.dropdown-btn {
  background: #f0f0f0;
  color: #333;
  border: none;
  padding: 14px 30px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 16px;
  cursor: pointer;
  transition: 0.3s ease-in-out;
  box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
  text-align: center;
  min-width: 180px;
  /* Ensure the dropdown button is wide enough */
    outline: none;
}

/* Dropdown Content - Opens Upwards */
.dropdown-content {
  display: none;
  position: absolute;
  bottom: 50px;
  /* Position it above the button */
    left: 50%;
  transform: translateX(-50%);
  background: #e0e0e0;
  box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
  border-radius: 12px;
  min-width: 200px;
  z-index: 1000;
  overflow: hidden;
}

/* Dropdown Buttons Inside */
.dropdown-content button {
  width: 100%;
  background: none;
  border: none;
  padding: 12px;
  text-align: left;
  font-size: 16px;
  color: #333;
  cursor: pointer;
  transition: 0.3s;
}

/* Hover Effects */
.dropdown-content button:hover {
  background: #d6d6d6;
}

/* Show Dropdown */
.show-dropdown {
  display: block;
}

/* Switch Container Improvements */
/* Toggle Switch Base */
.switch {
  position: relative;
  display: inline-block;
  width: 120px;
  /* Adjust the width as needed */
  height: 34px;
  /* Adjust the height as needed */;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

/* Label Positioning inside the slider */
.label {
  color: white;
  text-align: center;
  line-height: 34px;
  /* Match the height of the slider */
  font-size: 14px;
  font-weight: bold;
  user-select: none;
}

.label-left {
  position: absolute;
  left: 4px;
  width: 50%;
  /* Half of the slider's width */;
}

.label-right {
  position: absolute;
  right: 4px;
  width: 50%;
  /* Half of the slider's width */;
}

/* Color Changes on Check */
input:checked + .slider {
  background-color: #2196F3;
  /* Slider background when checked */;
}

input:checked + .slider:before {
  transform: translateX(80px);
  /* Move the slider to cover the left label */;
}

input:checked + .slider .label-left {
  color: #ccc;
  /* Dim the color of the 'Interventions' label */;
}

input:not(:checked) + .slider .label-right {
  color: #ccc;
  /* Dim the color of the 'Patient Info' label */;
}



/* butoanee switch*/


.editable-input, .editable-textarea {
  background: #e0e0e0;
  border: none;
  padding: 10px;
  border-radius: 8px;
  width: 100%;
  box-shadow: inset 4px 4px 8px #bebebe, inset -4px -4px 8px #ffffff;
  transition: box-shadow 0.3s ease-in-out;
}

.editable-input:focus, .editable-textarea:focus {
  outline: none;
  box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
}

.editable-input[type="date"] {
  color: #666;
  /* Adjust color for browsers that don't handle placeholder color well */;
}





.neumorphic-tabs {
  display: flex;
  background: #e0e0e0;
  border-radius: 16px;
  box-shadow: 7px 7px 14px #bebebe, -7px -7px 14px #ffffff;
  margin-bottom: 20px;
  padding: 5px;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 16px;
  font-weight: bold;
  color: #666;
  /* Default text color */;
}

.tab:hover {
  background-color: #dcdcdc;
  /* Slight highlight on hover */;
}

.tab.active {
  background-color: #d6d6d6;
  /* Active tab color */
    box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
  color: #333;
  /* Darker text for active tab */;
}


/*toooolbar*/

/* ✅ Centered Bottom Toolbar */


/* Ensure the toolbar is always on top */


/* Keep fullscreen toolbar identical to original */
.fullscreen-toolbar {
  position: fixed !important;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(20, 20, 20, 0.95);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  z-index: 10001;
  /* Ensure it is above everything */;
}

/* Fullscreen Image Overlay */
.fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Fullscreen Image */
.fullscreen-image {
  max-width: 90%;
  max-height: 90%;
}

/* Navigation Arrows */
.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
  padding: 10px;
}
.left-arrow {
  left: 20px;
}
.right-arrow {
  right: 20px;
}



/* Sidebar Animation */
.sidebar-left,
.sidebar-right {
  transition: width 0.3s ease, padding 0.3s ease;
  position: relative;
}

.sidebar-toggle-button {
  background: #e0e0e0;
  color: #333;
  font-size: 1rem;
  padding: 8px 12px;
  border-radius: 10px;
  border: none;
  box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
  cursor: pointer;
}

.sidebar-toggle-button:hover {
  background: #f5f5f5;
}


.sidebar-left .sidebar-toggle-button {
  right: -20px;
}

.sidebar-right .sidebar-toggle-button {
  left: -20px;
}

.sidebar-hidden {
  width: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

/* Ensure main content expands */
.main-content {
  transition: all 0.3s ease;
  flex: 1;
}
/* Prevent horizontal scrolling for photo container */
.main-content {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}

/* Ensure images scale properly */
.main-content img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Additional mobile-specific overflow fixes */
@media (max-width: 768px) {
  body, html {
        overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  }
  
    .main-content {
        overflow-x: hidden;
  padding: 0;
  };
}

/* ✅ Prevent Button Overlapping on Small Screens */


.bottom-toolbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background: #e0e0e0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
  border-top: 1px solid #d1d1d1;
  z-index: 1000;
  padding: 0 20px;
}

.toolbar-button {
  background: #f0f0f0;
  color: #333;
  border: none;
  padding: 14px 30px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 16px;
  cursor: pointer;
  transition: 0.3s ease-in-out;
  box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
  text-align: center;
  min-width: 140px;
  outline: none;
}

.toolbar-button:hover {
  background: #e0e0e0;
  box-shadow: inset 4px 4px 8px #bebebe, inset -4px -4px 8px #ffffff;
  transform: translateY(-2px);
}




/* Mobile Header for Hamburger Buttons */
/* Mobile Controls Layout */
.mobile-header {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  justify-content: space-between;
  z-index: 1001;
}

.mobile-toolbar-toggle {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 10px;
  z-index: 1001;
}

.mobile-toggle {
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
}

/* Slide-out Sidebars and Toolbar */
@media (max-width: 768px) {
  .mobile-header,
  .mobile-toolbar-toggle {
    display: flex;
  }

  .sidebar-left,
  .sidebar-right,

  .sidebar-left {
    top: 0;
  transform: translateX(-100%);
  }

  .sidebar-left.show {
    display: flex;
  }

  .sidebar-right {
    top: 0;
  right: 0;
  width: 80%;
  transform: translateX(100%);
  flex-direction: column;
  }

  .sidebar-right.show {
    display: flex;
  transform: translateX(0);
  }


  /* Dark screen behind sidebars when open */

/* Close Button Inside Menus */
.mobile-close {
  display: none;
  margin: 10px;
  padding: 8px 14px;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 10px;
  font-weight: bold;
  z-index: 1003;
  align-self: flex-start;
  position: sticky;
  top: 0;
}


/* Mobile Toolbar Vertical */


  .mobile-close {
  display: block;
}

  .toggle-btn {
  display: none;
  /* Hide desktop toggle buttons */;
}

/*@media (max-width: 768px) {
  .sidebar-left,
  .sidebar-right {
    overflow-y: auto;  /* ✅ Enable internal scroll */
  /*  -webkit-overflow-scrolling: touch; /* ✅ Smooth scrolling for iOS *//*
  }*/

  body.lock-scroll {
    overflow: hidden;
    height: 100vh;
  }
}







/* 🔷 TOPBAR CONTAINER */
/* 🔷 NEW TOPBAR CONTAINER — TWO ROWS */
.topbar {
  display: flex;
  flex-direction: column;
  background: #e0e0e0;
  padding: 10px 20px;
  margin: 0 auto 20px auto;
  border-radius: 20px;
  box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
  color: #333;
  width: 100%;
  box-sizing: border-box;
  gap: 10px;
  position: relative;
}

/* 🔹 First row: toggle buttons + name + age */
/*.topbar-row-1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}*/

/* 🔹 Center: patient name and age */
.topbar-name-input {
  /*max-width: 260px;*/
  min-width: 160px;
  border: none;
  background: transparent;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  color: #333;
  outline: none;
}


.topbar-name-input::placeholder {
  color: #aaa;
  font-weight: normal;
}

.topbar-age-static {
  margin-left: 20px;
  font-size: 18px;
  color: #777;
  white-space: nowrap;
}

.topbar-age {
  font-size: 1rem;
  color: #666;
}

/* 🔹 Sidebar toggle buttons (left/right) */
.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 🔹 Second row: toolbar buttons */
.topbar-row-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* 🔹 Multimedia Dropdown */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 45px;
  /* adjust for dropdown positioning */
  left: 50%;
  transform: translateX(-50%);
  background: #e0e0e0;
  box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
  border-radius: 12px;
  min-width: 180px;
  z-index: 1000;
  overflow: hidden;
}

.dropdown-content button {
  width: 100%;
  background: none;
  border: none;
  padding: 12px;
  text-align: left;
  font-size: 16px;
  color: #333;
  cursor: pointer;
  transition: 0.3s;
}

.dropdown-content button:hover {
  background: #d6d6d6;
}

.dropdown-content {
  display: none;
  position: absolute;
  background: #e0e0e0;
  border-radius: 12px;
  box-shadow: 5px 5px 15px #bebebe, -5px -5px 15px #ffffff;
  padding: 10px;
  z-index: 999;
}







.dropdown-content.show {
  display: block;
}


/* 🔷 LEFT + RIGHT SECTIONS */
.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 🔷 PATIENT NAME & AGE */
.topbar-name-age {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-radius: 16px;
  background: #e0e0e0;
  box-shadow: inset 6px 6px 12px #bebebe, inset -6px -6px 12px #ffffff;
  width: fit-content;
  /* only as wide as content */
  max-width: 100%;
  margin: 0 auto;
  color: #333;
  gap: 10px;
  transform-origin: center;
  transition: transform 0.2s ease;
}


.topbar-name {
  margin: 0;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 1.1rem;
  background: #e0e0e0;
  box-shadow: inset 2px 2px 5px #bebebe, inset -2px -2px 5px #ffffff;
}

.topbar-age {
  font-size: 1rem;
  color: #666;
}


/* 🔷 BUTTONS */
.topbar-button {
  padding: 8px 14px;
  font-size: 1rem;
  background: #e0e0e0;
  color: #333;
  border: none;
  border-radius: 12px;
  box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.topbar-button:hover {
  background: #f2f2f2;
}

/* 🔽 DROPDOWN TOGGLE ICON */
.topbar-chevron {
  position: absolute;
  bottom: -29px;
  left: 50%;
  transform: translateX(-50%);
  background: #e0e0e0;
  color: #555;
  font-size: 1.2rem;
  padding: 3px 12px;
  border-radius: 10px;
  /*box-shadow: 2px 2px 5px #bebebe, -2px -2px 5px #ffffff;*/
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
}
.topbar-chevron.rotated {
  transform: translateX(-50%) rotate(180deg);
}
.topbar-chevron:hover {
  background: #f5f5f5;
  transform: translateX(-50%) scale(1.1);
}


/* 🔽 COLLAPSIBLE PATIENT INFO PANEL */
#topbar-patient-info {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease, padding 0.3s ease;
  padding: 0 20px;
  margin: 0 10px;
  border-radius: 20px;
  background: #e0e0e0;
  box-shadow: inset 4px 4px 8px #bebebe, inset -4px -4px 8px #ffffff;
}

#topbar-patient-info.open {
  max-height: 600px;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 10px;
}

/* 🔹 INSIDE THE PATIENT INFO SECTION */
.topbar-patient-info {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* 2 Columns for fields */
.topbar-info-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 45%;
}

/* Notes spans both columns */
.topbar-notes {
  flex: 1 1 100%;
  margin-top: 10px;
}

/* Labels */
.topbar-patient-info label {
  display: flex;
  flex-direction: column;
  font-weight: bold;
  font-size: 0.9rem;
  color: #555;
}

/* Editable Inputs + Textareas */
.editable-input,
.editable-textarea {
  background: #e0e0e0;
  border: none;
  color: #333;
  padding: 8px 12px;
  border-radius: 10px;
  margin-top: 6px;
  font-size: 0.95rem;
  box-shadow: inset 2px 2px 5px #bebebe, inset -2px -2px 5px #ffffff;
}

.editable-textarea {
  width: 100%;
  resize: vertical;
}

.editable-input:focus,
.editable-textarea:focus {
  outline: none;
  box-shadow: inset 2px 2px 4px #bababa, inset -2px -2px 4px #ffffff;
}
/* ✅ Hide elements with this class only on mobile */
@media only screen and (max-width: 768px) {
  .hide-on-mobile {
    display: none !important;
  };
}


.hidden {
  display: none;
}

/* 🔧 Fix Mobile Layout */
@media (max-width: 768px) {
  /* Stack layout vertically on mobile */
  body,
  .container {
    flex-direction: column;
  }

  .sidebar-left,
  .sidebar-right {
    position: fixed;
  top: 0;
  height: 100%;
  width: 80%;
  z-index: 1002;
  box-shadow: 4px 0 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease-in-out;
  }

  .sidebar-left {
    left: 0;
  transform: translateX(-100%);
  }

  .sidebar-left.show {
    transform: translateX(0);
  }

  .sidebar-right {
    right: 0;
  transform: translateX(100%);
  }

  .sidebar-right.show {
    transform: translateX(0);
  }

  /* Make topbar full width */
  .topbar {
    flex-wrap: wrap;
  min-height: unset;
  max-height: unset;
  position: relative;
  }



  /* Make toggle buttons always visible */
  .sidebar-toggle-button {
    display: block !important;
  z-index: 1100;
  top: 10px;
  background: #e0e0e0;
  }

  .sidebar-left .sidebar-toggle-button {
    left: 10px;
  }

  .sidebar-right .sidebar-toggle-button {
    right: 10px;
  }

  /* Allow content to take full width below */
  .main-content {
    width: 100% !important;
  }

  /* Fix bottom toolbar on small screens */
  .bottom-toolbar {
    flex-wrap: wrap;
  gap: 10px;
  height: auto;
  padding: 10px;
  position: fixed;
  bottom: 0;
  z-index: 1000;
  }

  /* Remove the mobile-only 'Tools' button */
  .mobile-toolbar-toggle {
    display: none !important;
  }

  /* Hide close buttons inside mobile sidebar */
  .mobile-close {
    display: none !important;
  };
}

.mobile-close {
  display: none;
  margin: 10px;
  padding: 8px 14px;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 10px;
  font-weight: bold;
  z-index: 1003;
  align-self: flex-start;
  position: sticky;
  top: 0;
}

@media (max-width: 768px) {
  .mobile-close {
    display: block;
  }
}

@media (max-width: 768px) {
  .sidebar-left,
  .sidebar-right {
    display: none; /* 🔒 Hidden by default */
  }

  .sidebar-left.show,
  .sidebar-right.show {
    display: flex !important; /* ✅ Show when toggled */
  }
}
@media only screen and (max-width: 768px) {
  .sidebar-left,
  .sidebar-right {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 80%;
    max-width: 300px;
    background: #f0f0f0;
    z-index: 9998;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    overflow-y: auto;
    transition: transform 0.3s ease;
  }

  .sidebar-left.show {
    display: block;
    left: 0;
  }

  .sidebar-right.show {
    display: block;
    right: 0;
  }

  /* Hide toggle buttons inside topbar on mobile */
  .topbar-button#toggle-left,
  .topbar-button#toggle-right {
    display: none;
  }
}
/* 🔵 Smooth open/close for Patient Info in Topbar */
#topbar-patient-info {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

/* 🔵 Opened state */
#topbar-patient-info.open {
  max-height: 500px;
  /* adjust height if needed */;
}

/* 🔵 Rotate the Topbar Chevron ▾ */
#topbar-chevron {
  transition: transform 0.3s ease;
}
#topbar-chevron.rotated {
  transform: rotate(180deg);
}

/* hide dropdown menus by default */
.dropdown .dropdown-content {
  display: none;
}

/* when the wrapper has “show”, reveal its menu */
.dropdown.show .dropdown-content {
  display: block;
}
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  bottom: 100%;
  /* 📍 OPEN UPWARD */
  left: 0;
  min-width: 180px;
  background: #e0e0e0;
  border-radius: 12px;
  box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
  /* 📍 Neumorphism */
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  /* 📍 soft slide up */
  transition: all 0.25s ease;
  z-index: 1000;
}

.dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(-5px);
  /* small bounce effect */
  transition: all 0.25s ease, transform 0.3s ease-out;
}




.dropdown-menu button {
  display: block;
  width: 100%;
  padding: 10px 15px;
  background: none;
  border: none;
  text-align: left;
  font-size: 16px;
  cursor: pointer;
}

.dropdown-menu button:hover {
  background: #d0d0d0;
}


/* 🛠 Dropdowns default hidden */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--background-color, #fff);
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  padding: 10px 0;
  z-index: 1000;
  border-radius: 10px;
}

/* 🛠 Dropdowns visible when parent .show is active */



.dropdown.show .dropdown-content {
  display: block;
}

/* Multimedia Dropdown Container */
.multimedia-dropdown {
  position: relative;
  display: inline-block;
}

/* Multimedia Dropdown Button */
.multimedia-btn {
  background: #e0e0e0;
  color: #333;
  border: none;
  padding: 8px 14px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 16px;
  cursor: pointer;
  transition: 0.3s ease-in-out;
  box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
  text-align: center;
  /*min-width: 180px;*/
  outline: none;
}

/* Multimedia Dropdown Content */
.multimedia-dropdown-content {
  display: none;
  position: absolute;
  top: 110%;
  /* open downward */
  left: 50%;
  transform: translateX(-50%);
  background: #e0e0e0;
  box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
  border-radius: 12px;
  min-width: 200px;
  overflow: hidden;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

/* When open */
.multimedia-dropdown.show .multimedia-dropdown-content {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(5px);
}

/* Buttons inside Dropdown */
.multimedia-dropdown-content button {
  width: 100%;
  background: none;
  border: none;
  padding: 12px 20px;
  text-align: left;
  font-size: 16px;
  color: #333;
  cursor: pointer;
  transition: background 0.3s;
}

.multimedia-dropdown-content button:hover {
  background: #d6d6d6;
}


.user-dropdown {
  position: relative;
}

.user-dropdown .dropdown-btn {
  padding: 8px 14px;
  border-radius: 12px;
  box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
  background: #e0e0e0;
  color: #333;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
}

.user-dropdown .dropdown-menu {
  position: absolute;
  bottom: 50px;
  right: 0;
  background: #e0e0e0;
  border-radius: 12px;
  box-shadow: 4px 4px 10px #bebebe, -4px -4px 10px #ffffff;
  display: none;
  flex-direction: column;
  padding: 6px;
  z-index: 100;
}

.user-dropdown .dropdown-menu.show {
  display: flex;
}

.user-dropdown .dropdown-menu button {
  padding: 6px 12px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.user-dropdown .dropdown-menu button:hover {
  background: #d0d0d0;
}






/* începe sd card search and stuff.... */

.sdcard-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85vw;
  max-height: 85vh;
  background: #f0f0f3;
  border-radius: 20px;
  box-shadow: 10px 10px 30px #bebebe, -10px -10px 30px #ffffff;
  display: flex;
  flex-direction: column;
  z-index: 9999;
  overflow: hidden;
  border: 1px solid #ddd;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: #e0e0e0;
  box-shadow: inset 2px 2px 5px #d1d9e6, inset -2px -2px 5px #ffffff;
  border-bottom: 1px solid #ccc;
  gap: 20px;
}

.modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  flex-shrink: 0;
}

.modal-header .info-line {
  display: flex;
  gap: 30px;
  font-size: 14px;
  color: #444;
  flex-grow: 1;
  justify-content: center;
}

.modal-header span {
  white-space: nowrap;
  display: inline-block;
  padding: 0 5px;
}


.modal-header .close-button {
  background: none;
  border: none;
  font-size: 24px;
  color: #888;
  cursor: pointer;
  transition: color 0.2s ease;
  margin-left: auto;
}

.modal-header .close-button:hover {
  color: #e74c3c;
}


/* Grid */
#sd-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 18px;
  padding: 20px;
  justify-items: center;
  align-items: flex-start;
  position: relative;
  background: #f0f0f3;
  overflow-y: auto;
  flex: 1;
}

/* Thumbnails */
.thumb-wrapper {
  width: 130px;
  height: 130px;
  border-radius: 12px;
  background: #e0e0e0;
  box-shadow: 6px 6px 12px #d1d9e6, -6px -6px 12px #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}


.thumb-wrapper:hover {
  transform: scale(1.03);
}

.import-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.5;
}


.import-thumb.selected {
  box-shadow: inset 0 0 0 4px #007bff, 0 0 10px rgba(0, 123, 255, 0.5);
  opacity: 1;
  transform: scale(0.98);
  border-radius: 10px;
}



/* Spinner */
.thumb-spinner {
  position: absolute;
  font-size: 24px;
  color: #888;
}

/* Drag select box */
#selection-box {
  position: absolute;
  border: 2px dashed #007acc;
  background: rgba(0, 122, 204, 0.1);
  z-index: 999;
  pointer-events: none;
  border-radius: 8px;
}

/* Bottom Bar_sd */
.modal-actions {
  background: #e0e0e0;
  padding: 14px 24px;
  display: flex;
  justify-content: center;
  gap: 16px;
  border-top: 1px solid #ccc;
  box-shadow: inset 2px 2px 6px #d1d9e6, inset -2px -2px 6px #ffffff;
}

.modal-actions button {
  padding: 10px 18px;
  font-weight: 600;
  font-size: 14px;
  border: none;
  border-radius: 14px;
  background: #f0f0f3;
  color: #333;
  cursor: pointer;
  box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
  transition: all 0.2s ease;
}

.modal-actions button:hover {
  background: #e6e6ea;
  transform: scale(1.02);
}

.modal-actions button:active {
  transform: scale(0.96);
  box-shadow: inset 2px 2px 6px #bebebe, inset -2px -2px 6px #ffffff;
}

/* Floating selected counter .....i changed my mind...vreau sa pun counter de selected in butonul de import*/
/*.sd-floating-counter {
  position: absolute;
  top: 72px;
  right: 36px;
  background: #e0e0e0;
  padding: 8px 14px;
  border-radius: 16px;
  box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
  font-weight: bold;
  font-size: 14px;
  color: #333;
  z-index: 10001;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.sd-floating-counter.hidden {
  opacity: 0;
  pointer-events: none;
}

.sd-floating-counter.show {
  opacity: 1;
}*/

/* Utility */
.hidden {
  display: none !important;
}

/*termin sd card search and stuff....*/


/* ========= LIQUIFY PAGE ONLY ========= */
/* Center the whole page like Surgery View */
body.liquify{
  /* override global body{display:flex} safely for this page only */
  display: flex !important;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: #e0e0e0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x: hidden;
}

/* The centered card container (mirrors “.container” in Surgery View) */
.liquify .wrap{
  width: 95vw;
  min-height: 95vh;
  background: #e0e0e0;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}

/* Top bars */
.liquify .toolbar,
.liquify .subbar{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 14px;
  background: #e0e0e0;
  box-shadow: inset 6px 6px 12px #bebebe, inset -6px -6px 12px #ffffff;
}
.liquify .toolbar select,
.liquify .toolbar button,
.liquify .toolbar input[type="range"]{
  background: #e0e0e0;
  border: none;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
  box-shadow: 3px 3px 6px #bebebe, -3px -3px 6px #ffffff;
  cursor: pointer;
}
.liquify .toolbar select:focus{
  outline: none;
  box-shadow: 0 0 0 2px #8ab4f8;
}
.liquify .toolbar button:hover{
  box-shadow: inset 3px 3px 6px #bebebe, inset -3px -3px 6px #ffffff;
}

/* Thumbnails bar */
.liquify .thumbs{
  width: 100%;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 2px;
  border-radius: 12px;
  background: #e0e0e0;
  box-shadow: inset 4px 4px 8px #bebebe, inset -4px -4px 8px #ffffff;
}
.liquify .thumbs img{
  width: 72px;
  height: 72px;
  border-radius: 10px;
  object-fit: cover;
  cursor: pointer;
  box-shadow: 3px 3px 6px #bebebe, -3px -3px 6px #ffffff;
  flex: 0 0 auto;
  transition: transform .12s ease;
}
.liquify .thumbs img:hover{
  transform: scale(1.06);
}

/* Slots area: fills remaining space in the card, centered and responsive */
.liquify .slots{
  width: 100%;
  flex: 1 1 auto;
  /* take the leftover vertical space */
  min-height: 0;
  /* allow grid to shrink without pushing */
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  justify-content: center;
  /* center track(s) */
  justify-items: center;
  /* center each slot */;
}
@media (max-width: 720px){
  .liquify .slots{ grid-template-columns: 1fr; }
}

/* Slot card (namespaced so global .slot styles don’t interfere) */
.liquify .slot{
  width: 100%;
  max-width: 100%;
  background: #e0e0e0;
  border-radius: 14px;
  padding: 8px;
  box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
  display: grid;
  gap: 8px;
  min-width: 0;
  place-items: center;
}
.liquify .slot.active{
  outline: 3px solid #8ab4f8;
  outline-offset: 2px;
}

/* Stage sizing — stays centered, preserves aspect, never overflows */
:root{
  --work-w: 768;
  --work-h: 1024;
  --aspect: calc(var(--work-w) / var(--work-h));
  /* 0.75 */
  --stage-maxh: 70vh;
  /* JS will set exact value */;
}
.liquify .stage-wrap{
  position: relative;
  margin-inline: auto;
  /* center the stage box */
  height: min(var(--stage-maxh), 82svh);
  width:  min(100%, calc(min(var(--stage-maxh), 82svh) * var(--aspect)));
  aspect-ratio: calc(var(--work-w) / var(--work-h));
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
  background: #f2f2f2;
  touch-action: none;
}
.liquify .stage{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-areas: "stack";
  transform-origin: 50% 50%;
}
.liquify .stage > *{
  grid-area: stack;
  width: 100%;
  height: 100%;
}

.liquify canvas.view, .liquify canvas.guides{
  width: 100%;
  height: 100%;
}
.liquify canvas.guides{
  pointer-events: none;
  display: none;
}
.liquify svg.mesh{
  pointer-events: none;
}

/* Slot controls */
.liquify .slot-controls{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.liquify .slot-controls button,
.liquify .slot-controls input[type="range"]{
  background: #e0e0e0;
  border: none;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 13px;
  box-shadow: 2px 2px 4px #bebebe, -2px -2px 4px #ffffff;
  cursor: pointer;
}

/* Label (avoid conflicts with global .label) */
.liquify .label{
  font-size: 12px;
  opacity:.8;
  color:#333;
  line-height: normal;
}

/* Export preview & help */
.liquify .export-out{
  text-align:center;
  width:100%;
}
.liquify .export-out img{
  max-width:100%;
  border-radius:10px;
  box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
}
.liquify .help{
  text-align:center;
  font-size:12px;
  opacity:.7;
  width:100%;
}






/* =========================
   EXPORT CENTER — rigid row
   ========================= */

/* make the page wrapper flexible; the row itself scrolls horizontally */
body.export-center {
  padding: 12px;
  background: #e0e0e0;
}

/* fixed working dimensions */
.export-center {
  --slot-w: 768px;
  --slot-h: 1024px;
  --gap: 16px;
  --page-pad: 12px;
}

/* keep the outer wrap simple; the row below handles overflow */
.export-center .wrap {
  width: 100%;
  margin-inline: auto;
  display: grid;
  gap: 12px;
  justify-items: center;
  min-height: calc(100vh - var(--page-pad) * 2);
}

/* 🔵 ONE ROW ONLY (no wrap), fixed cards, horizontal scroll if needed */
.export-center .panel {
  display: flex;
  /* instead of CSS grid */
  flex-wrap: nowrap;
  /* force single row */
  align-items: flex-start;
  gap: var(--gap);
  width: 100%;
  overflow-x: auto;
  /* scroll horizontally on small screens */
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

/* each “side” is a fixed-width card; never shrink */
.export-center .side {
  flex: 0 0 var(--slot-w);
  /* fixed column width */
  width: var(--slot-w);
  min-width: var(--slot-w);
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #e0e0e0;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
}

/* the working area — always EXACT size; preserves 3:4 aspect */
.export-center .slot {
  position: relative;
  width: var(--slot-w);
  height: var(--slot-h);
  aspect-ratio: 3 / 4;
  /* just a safety belt; height is authoritative */
  overflow: hidden;
  border-radius: 14px;
  background: #e0e0e0;
  box-shadow: inset 6px 6px 12px #bebebe, inset -6px -6px 12px #ffffff;
  flex: none;
  /* don’t stretch inside the card */;
}

/* draggable media inside the slot */
.export-center .slot img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
  cursor: grab;
  max-width: none;
  max-height: none;
  z-index: 1;
}

/* ghost + guides stay on top */
.export-center .ghost {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  z-index: 2;
}
.export-center .guides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  display: none;
}

/* thumbnails under each card */
.export-center .thumbs {
  width: var(--slot-w);
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 2px;
  border-radius: 12px;
  background: #e0e0e0;
  box-shadow: inset 4px 4px 8px #bebebe, inset -4px -4px 8px #ffffff;
}

/* morph preview canvas should match a slot size so it never squeezes */
.export-center #morphCanvas {
  display: block;
  width: var(--slot-w);
  height: var(--slot-h);
  border-radius: 12px;
  box-shadow: inset 6px 6px 12px #bebebe, inset -6px -6px 12px #ffffff;
}

/* keep row behavior even on tiny screens (no stacking) */
/*@media (max-width: 820px) {
  .export-center .panel { flex-wrap: nowrap;
  };
}*/



/* ===== Fullscreen viewer ===== */
.fs-viewer {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.fs-media-wrap {
  position: relative;
  max-width: 95vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#fullscreen-media {
  max-width: 95vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  transform: none;
  /* ← always start truly unzoomed */
  transform-origin: center;
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0,0,0,0.6);
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.2s ease;
}

/* Arrows */
.fs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(20,20,20,0.6);
  backdrop-filter: blur(2px);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 2rem;
  line-height: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 10000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.fs-arrow:hover {
  background: rgba(255,255,255,0.18);
}
.fs-arrow:active {
  transform: translateY(-50%) scale(0.96);
}
.fs-arrow.left  {
  left: 14px;
}
.fs-arrow.right {
  right: 14px;
}

/* Close button */
.fs-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(20,20,20,0.6);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 18px;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 10001;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.fs-close:hover {
  background: rgba(255,255,255,0.18);
}

/* Toolbar */
.fs-toolbar {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  z-index: 10000;
}
.fs-btn {
  background: rgba(30,30,30,0.8);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}
.fs-btn:hover {
  background: rgba(255,255,255,0.12);
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .fs-arrow { width: 48px;
  height: 48px;
  font-size: 1.8rem;
  }
  .fs-arrow.left { left: 6px;
  }
  .fs-arrow.right { right: 6px;
  }
  .fs-close { top: 8px;
  right: 8px;
  width: 38px;
  height: 38px;
  };
}



/***************************************************/


/* Photos panel must accept explicit pixel height */
#patient-photo {
  height: 420px;
  /* default; JS will override if a saved value exists */
  max-height: calc(100vh - 220px);
  overflow: auto;
  position: relative;
  flex: 0 0 auto;
  /* <- critical: prevents flex from ignoring height */;
}

/* Sibling resizer bar that sits right below #patient-photo */
.panel-resizer {
  height: 12px;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.08));
  backdrop-filter: blur(2px);
  margin-bottom: 6px;
  /* small breathing room below */;
}

.panel-resizer::before {
  content: "";
  width: 56px;
  height: 4px;
  border-radius: 999px;
  background: rgba(0,0,0,0.3);
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
}

.panel-resizer:hover::before {
  background: rgba(0,0,0,0.45);
}

/* Optional visual debug (enable if needed) */
/* #patient-photo { outline: 1px dashed hotpink; } */




/* ---------- webkit (chrome/edge/safari/electron) ---------- */
*::-webkit-scrollbar {
  width: 8px;
  /* vertical */
  height: 8px;
  /* horizontal */;
}

*::-webkit-scrollbar-track {
  background: transparent;
  /* hides the white track */;
}

*::-webkit-scrollbar-thumb {
  background: rgba(120,120,120,0.55);
  /* gray bar */
  border-radius: 10px;
  border: 2px solid transparent;
  /* creates some breathing room */
  background-clip: padding-box;
  /* keeps only the thumb visible */;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(120,120,120,0.75);
}

*::-webkit-scrollbar-thumb:active {
  background: rgba(100,100,100,0.95);
}

/* corners & resizer (optional, keep transparent) */
*::-webkit-scrollbar-corner {
  background: transparent;
}

/* ---------- firefox ---------- */
html, body, * {
  scrollbar-width: thin;
  /* thin, no big track */
  scrollbar-color: rgba(120,120,120,0.65) transparent;
  /* thumb / track */;
}



/*-------ma joc cu primejdia in topbar/incep selection pentru share si download-------------*/


#patient-photo.select-mode .captured-video {
  cursor: pointer;
  position: relative;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color .15s ease, transform .15s ease;
}
#patient-photo .media-selected {
  outline-color: #4caf50;
  transform: translateZ(0) scale(0.99);
}

.media-wrap {
  position: relative;
  display: inline-block;
}
.media-check-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(76,175,80,0.92);
  color: #fff;
  font-size: 14px;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.media-wrap.media-selected .media-check-badge {
  display: flex;
}




/*-----decrop....*/
.media-cut-chip{
  position:absolute;
  top:8px;
  right:8px;
  padding:2px 6px;
  font-size:11px;
  font-weight:600;
  color:#fff;
  background:rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:8px;
  pointer-events:none;
}


.media-wrap {
  position: relative;
}
.media-cut-chip{
  position:absolute;
  top:8px;
  right:8px;
  padding:2px 6px;
  font-size:11px;
  font-weight:600;
  color:#fff;
  background:rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:8px;
  pointer-events:none;
}
/* selection badge: hidden by default */
.media-check-badge{
  position:absolute;
  bottom:8px;
  right:8px;
  width:22px;
  height:22px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:13px;
  opacity:0;
  transform:scale(.8);
  transition:opacity .15s, transform .15s;
  pointer-events:none;
}

/* remove hover reveal entirely */
.media-wrap:hover .media-check-badge{
  opacity:0;
  transform:scale(.8);
}

/* only show when in select mode AND selected */
.select-mode .media-wrap.media-selected .media-check-badge{
  opacity:1;
  transform:scale(1);
}












/* ================= BOTTOM DOCK — SOLID NEUMORPHISM (FINAL) ================= */

/* theme + sizing (fallbacks ensure never transparent) */
:root{
  --dock-h: 68px;
  --dock-r: 22px;
  --fab:   66px;
  --pp-surface: #e0e0e0;
  /* solid base */
  --pp-ink: #333;
  --dock-bg: var(--pp-surface, #e0e0e0);
  --dock-ink: var(--pp-ink, #333);
  --halo: rgba(255,255,255,.78);
}
:root{
  --neumorphic-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
}


/* ========= SOLID BACKPLATE (prevents any show-through) ========= */
#btbar-plate{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: max(96px, calc(18px + var(--dock-h) + env(safe-area-inset-bottom) + 18px));
  background: var(--pp-surface, #e0e0e0) !important;
  /* absolutely solid */
  z-index: 9997;
  /* below the toolbar, above the page */
  pointer-events: none;
}

/* toolbar sits above the plate and never blurs/mixes */
#btbar{
  position: fixed !important;
  left:0;
  right:0;
  bottom:0;
  z-index: 9999 !important;
  padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
  background: transparent !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  isolation: isolate;
}

/* inner content sits above the backplate */
#btbar > *{
  position: relative;
  z-index: 1;
}

/* ---- capsule shell ---- */
#btbar .dock-shell{
  position: relative;
  height: var(--dock-h);
  border-radius: var(--dock-r);
  background: var(--pp-surface, #e0e0e0) !important;
  /* SOLID */
  box-shadow:
    10px 10px 22px rgba(0,0,0,.08),
    -10px -10px 22px rgba(255,255,255,.85);
  overflow: visible;
}

/* remove any glow behind FAB (keep it clean) */
#btbar .dock-shell::after{
  content:none !important;
  display:none !important;
}

/* ---- list layout ---- */
#btbar .dock-list{
  list-style:none;
  margin:0;
  padding:0 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  height:100%;
}
#btbar .dock-item{
  display:flex;
}

/* buttons */
#btbar .dock-btn{
  min-width:54px;
  height:44px;
  padding:0 14px;
  border:0;
  border-radius:14px;
  background: var(--pp-surface, #e0e0e0) !important;
  /* SOLID */
  color: var(--pp-ink, #333);
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  box-shadow: 6px 6px 12px rgba(0,0,0,.10), -6px -6px 12px rgba(255,255,255,.88);
}
#btbar .dock-btn:hover{
  transform: translateY(-1px);
}
#btbar .dock-btn:active{
  box-shadow: inset 5px 5px 10px rgba(0,0,0,.12), inset -5px -5px 10px rgba(255,255,255,.82);
}

/* keep center gap for FAB */
#btbar .dock-spacer{
  width: calc(var(--fab) + 24px);
  height:1px;
  pointer-events:none;
}

/* ---- centered FAB (solid) ---- */
#btbar .fab{
  position:absolute;
  left:50%;
  bottom: calc(50% - var(--fab)/2 + 10px);
  transform: translateX(-50%);
  width: var(--fab);
  height: var(--fab);
  border:0;
  border-radius:50%;
  cursor:pointer;
  background: var(--pp-surface, #e0e0e0) !important;
  /* SOLID */
  color: var(--pp-ink, #333);
  /* plus uses currentColor */
  box-shadow: 10px 10px 20px rgba(0,0,0,.12), -10px -10px 20px rgba(255,255,255,.90);
  outline:none;
  -webkit-tap-highlight-color:transparent;
  z-index: 65;
}
/* remove halo ring around the FAB disc */
#btbar .fab::before{
  content:none !important;
  display:none !important;
}
/* draw the + */
#btbar .fab::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:16px;
  height:16px;
  transform:translate(-50%,-50%);
  background:
    linear-gradient(currentColor, currentColor) center/100% 3px no-repeat,
    linear-gradient(currentColor, currentColor) center/3px 100% no-repeat;
  opacity: 1;
  pointer-events:none;
}
#btbar .fab:hover{
  transform: translateX(-50%) translateY(4px);
}
#btbar .fab:active{
  box-shadow: inset 8px 8px 14px rgba(0,0,0,.12), inset -6px -6px 10px rgba(255,255,255,.80);
  transform: translateX(-50%) translateY(0);
}

/* ---- FAB mini-menu (solid bubble) ---- */
#btbar .fab-menu{
  position:absolute;
  left:50%;
  bottom: calc(var(--dock-h) + (var(--fab) * 0.33));
  transform: translateX(-50%) translateY(8px);
  display:grid;
  gap:10px;
  padding:12px 12px 14px;
  min-width:220px;
  background: var(--pp-surface, #e0e0e0) !important;
  /* SOLID */
  color: var(--pp-ink, #333);
  border-radius:18px;
  box-shadow: 6px 6px 14px rgba(0,0,0,.12), -6px -6px 14px rgba(255,255,255,.90);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 120;
}
#btbar .fab-menu.show{
  opacity:1;
  pointer-events:auto;
  transform: translateX(-50%) translateY(0);
}
#btbar .fab-menu::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-10px;
  transform: translateX(-50%);
  width:22px;
  height:14px;
  border-radius:0 0 14px 14px/0 0 14px 14px;
  background: var(--pp-surface, #e0e0e0) !important;
  /* SOLID notch */
  box-shadow: 3px 3px 6px rgba(0,0,0,.10), -3px -3px 6px rgba(255,255,255,.88);
}
#btbar .fab-menu button{
  height:42px;
  border:0;
  border-radius:12px;
  background: var(--pp-surface, #e0e0e0) !important;
  /* SOLID */
  color: var(--pp-ink, #333);
  font:inherit;
  font-weight:600;
  text-align:left;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  box-shadow: 3px 3px 6px rgba(0,0,0,.12), -3px -3px 6px rgba(255,255,255,.85);
}

/* dropdowns sit below the fab-menu but above shell/buttons */
#btbar .dropdown-menu{
  z-index:110 !important;
}

/* =================== ENV VISIBILITY RULES =================== */

/* default: hide env-specific buttons */
#sd-card-btn, #btn-native-capture{
  display:none !important;
}

/* Hide left/right on desktop web ONLY (we’ll show them on mobile web below) */
html.env-web #btbar [aria-label="Left sidebar"],
html.env-web #btbar [aria-label="Right sidebar"]{
  display:none;
}

/* Electron: show SD-card and sidebars */
html.env-electron #sd-card-btn{
  display:inline-flex !important;
}
html.env-electron #btbar [aria-label="Left sidebar"],
html.env-electron #btbar [aria-label="Right sidebar"]{
  display:inline-flex !important;
}

/* Capacitor: show Native Capture and sidebars */
html.env-capacitor #btn-native-capture{
  display:inline-flex !important;
}
html.env-capacitor #btbar [aria-label="Left sidebar"],
html.env-capacitor #btbar [aria-label="Right sidebar"]{
  display:inline-flex !important;
}

/* never show the legacy blue mobile header toggles */
.mobile-header, .mobile-toolbar-toggle{
  display:none !important;
}

/* =================== MOBILE WEB TUNING (≤820px) =================== */
@media (max-width: 820px){
  /* on mobile web we DO want the left/right sidebar buttons visible */
  html.env-web #btbar [aria-label="Left sidebar"],
  html.env-web #btbar [aria-label="Right sidebar"]{
    display:inline-flex !important;
  }

  :root{ --dock-h: 64px;
  --fab: 62px;
  }

  /* safe-area spacing */
  #btbar{ padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }
  #btbar-plate{ height: calc(12px + var(--dock-h) + env(safe-area-inset-bottom) + 12px) !important;
  }

  /* tighter layout */
  #btbar .dock-list{ gap:12px;
  padding:0 12px;
  }
  #btbar .dock-btn{
    -webkit-appearance:none !important;
  appearance:none !important;
  min-width:44px;
  height:40px;
  padding:0 10px;
  border-radius:12px;
  font-weight:700;
  }
  #btbar .dock-spacer{ width: calc(var(--fab) + 18px);
  }

  /* iconify long-label buttons to save space */
  #btbar .dock-btn[aria-label="Compare"]{
    font-size:0 !important;
  }
  #btbar .dock-btn[aria-label="Compare"]::before{
    content:"🆚";
  }

  #btbar .dock-btn[aria-label="OR View"]{
    font-size:0 !important;
  padding:0 12px !important;
  min-width:44px !important;
  }
  #btbar .dock-btn[aria-label="OR View"]::before{
    content:"🏥";
  font-size:20px;
  line-height:1;
  }

  /* smaller FAB lift */
  #btbar .fab{ bottom: calc(50% - var(--fab)/2 + 6px) !important;
  };
}

/* final safety: no bullets ever inside dock */
#btbar .dock-list{
  list-style:none !important;
}


/* --- MOBILE POLISH (uniform icons + better spacing) --- */
@media (max-width: 820px){
  /* slightly tighter gutters */
  #btbar .dock-list{
    gap: 10px !important;
  padding: 0 10px !important;
  }

  /* make all icon-only buttons perfectly square and same size */
  #btbar .dock-btn{
    min-width: 44px !important;
  width: 44px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  font-size: 20px !important;
  /* consistent glyph size */
    line-height: 1 !important;
  }

  /* replace 🆚 badge with a clean monochrome glyph */
  #btbar .dock-btn[aria-label="Compare"]{
    font-size: 0 !important;
  /* hide any text */
    width: 48px !important;
  /* a touch wider for arrow legs */
  }
  #btbar .dock-btn[aria-label="Compare"]::before{
    content: "⟷";
  /* double-headed arrow (clean, monochrome) */
    font-size: 22px;
  }

  /* OR View stays an icon, but normalize size */
  #btbar .dock-btn[aria-label="OR View"]{
    font-size: 0 !important;
  width: 48px !important;
  }
  #btbar .dock-btn[aria-label="OR View"]::before{
    content: "🏥";
  font-size: 20px;
  filter: saturate(0.75);
  /* slightly tame the multicolor look */
  }

  /* sidebar buttons: ensure same visual weight */
  #btbar .dock-btn[aria-label="Left sidebar"]::before,
  #btbar .dock-btn[aria-label="Right sidebar"]::before{
    font-size: 22px;
  line-height: 1;
  }

  /* shrink and nudge the FAB so it doesn’t dominate */
  :root{ --fab: 58px;
  }
  #btbar .fab{
    bottom: calc(50% - var(--fab)/2 + 6px) !important;
  }

  /* keep spacer in sync with smaller FAB */
  #btbar .dock-spacer{
    width: calc(var(--fab) + 16px) !important;
  };
}

/* =========================================================
   HOTFIX — mobile topbar + bottom dock (safe, additive)
   Paste at the VERY END of style.css
   =======================================================*/

/* -------- TOPBAR: mobile reflow & safe-area spacing ------- */
@media (max-width: 820px){
  .topbar{
    padding-top: max(10px, env(safe-area-inset-top));
  }

  /* row 1: [left buttons] [name+age] [right buttons] */
/*  .topbar-row-1{
    display: grid !important;
  grid-template-columns: auto 1fr auto;
  }*/

  .topbar-left, .topbar-right{
    display:flex;
  align-items:center;
  gap:10px;
  }

  .topbar-name-age{
    width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 10px 12px;
  gap: 8px;
  }

  .topbar-name-input{
    width: 100%;
  max-width: none;
  text-align: center;
  font-size: clamp(18px, 5vw, 22px);
  }

  .topbar-age-static{
    white-space: nowrap;
  font-size: clamp(14px, 3.6vw, 18px);
  margin-left: 8px;
  }

  /* row 2 packs tighter but stays centered */
  .topbar-row-2{
    justify-content: center !important;
  gap: 12px !important;
  flex-wrap: wrap;
  };
}

/* -------- BOTTOM DOCK: compact, never empty on phones ----- */
@media (max-width: 820px){
  /* dock spacing and safe area */
  #btbar{
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }
  #btbar-plate{
    height: calc(12px + var(--dock-h) + env(safe-area-inset-bottom) + 12px) !important;
  }

  /* tighter layout */
  #btbar .dock-list{
    gap: 12px !important;
  padding: 0 12px !important;
  justify-content: space-between !important;
  }

  /* square, icon-size buttons */
  #btbar .dock-btn{
    -webkit-appearance: none !important;
  appearance: none !important;
  min-width: 44px !important;
  width: 44px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  font-size: 0 !important;
  /* text hidden on phone; we draw icons */
  }

  /* Left/Right sidebar glyphs (always present on mobile) */
  #btbar .dock-btn[aria-label="Left sidebar"]::before{ content:"≡";
  }
  #btbar .dock-btn[aria-label="Right sidebar"]::before{ content:"⋯";
  }

  /* Refresh lives to the left of the FAB */
  #btbar .dock-btn[aria-label="Refresh"]::before{ content:"↻";
  }

  /* Space for the FAB */
  :root{ --fab: 58px;
  --dock-h: 64px;
  }
  #btbar .fab{ bottom: calc(50% - var(--fab)/2 + 6px) !important;
  }
  #btbar .dock-spacer{ width: calc(var(--fab) + 16px) !important;
  }

  /* If a “More …” button exists, hide text-buttons and move them inside it.
     If you DON'T add .dock-more in HTML, Compare/OR View remain visible. */
  #btbar:has(.dock-more) .dock-btn[aria-label="Compare"],
  #btbar:has(.dock-more) .dock-btn[aria-label="OR View"]{
    display: none !important;
  }

  /* If no .dock-more, iconify the long labels to save space */
  #btbar:not(:has(.dock-more)) .dock-btn[aria-label="Compare"]{
    display: inline-flex !important;
  }
  #btbar:not(:has(.dock-more)) .dock-btn[aria-label="Compare"]::before{
    content:"⟷";
  font-size:22px;
  }
  #btbar:not(:has(.dock-more)) .dock-btn[aria-label="OR View"]{
    display: inline-flex !important;
  width: 48px !important;
  }
  #btbar:not(:has(.dock-more)) .dock-btn[aria-label="OR View"]::before{
    content:"🏥";
  font-size:20px;
  };
}

/* -------- “More …” dropdown (optional) -------------------- */
/* Only matters if you add the HTML snippet for .dock-more */
#btbar .dock-more{
  display:none;
}
@media (max-width: 820px){
  #btbar .dock-more{ display:flex; }
  #btbar .dock-more .dock-btn{ width:44px !important; }
  #btbar .dock-more .dock-btn::before{ content:"…"; font-size:24px; line-height:1; }
  #btbar .dock-more .dropdown-menu{
    position:absolute; bottom: calc(var(--dock-h) + 10px);
    left: 50%; transform: translateX(-50%) translateY(8px);
    background: var(--pp-surface, #e0e0e0);
    border-radius: 14px;
    box-shadow: 6px 6px 14px rgba(0,0,0,.12), -6px -6px 14px rgba(255,255,255,.90);
    padding: 8px; min-width: 200px;
    opacity: 0; pointer-events: none; transition: .18s ease;
    z-index: 120;
  }
  #btbar .dock-more .dropdown-menu.show{
    opacity:1; pointer-events:auto; transform: translateX(-50%) translateY(0);
  }
  #btbar .dock-more .dropdown-menu button{
    height:40px; border:0; border-radius:12px;
    background: var(--pp-surface, #e0e0e0); color: var(--pp-ink, #333);
    font-weight:600; display:flex; align-items:center; gap:10px; padding:0 12px;
    box-shadow: 3px 3px 6px rgba(0,0,0,.12), -3px -3px 6px rgba(255,255,255,.85);
  }
}

/* final: bullets never in dock */
#btbar .dock-list, #btbar .dock-list *{
  list-style: none !important;
}


/* =========================================================
   MOBILE BOTTOM DOCK POLISH — spacing + “More …” menu
   (append to end of style.css; topbar untouched)
   =======================================================*/

/* equal spacing + consistent button sizing on phones */
@media (max-width: 820px){
  :root{ --dock-h: 64px;
  --fab: 58px;
  }

  #btbar{ padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }
  #btbar-plate{ height: calc(12px + var(--dock-h) + env(safe-area-inset-bottom) + 12px) !important;
  }

  #btbar .dock-list{
    display: flex !important;
  justify-content: space-between !important;
  /* even distribution */
    gap: clamp(10px, 4vw, 16px) !important;
  /* equal visual gaps */
    padding: 0 clamp(10px, 4vw, 18px) !important;
  height: 100% !important;
  }

  /* all dock buttons: same footprint */
  #btbar .dock-btn{
    -webkit-appearance: none !important;
  appearance: none !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  font-size: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  }

  /* left/right glyphs + refresh */
  #btbar .dock-btn[aria-label="Left sidebar"]::before{ content:"≡";
  }
  #btbar .dock-btn[aria-label="Right sidebar"]::before{ content:"⋯";
  font-size:22px;
  }
  #btbar .dock-btn[aria-label="Refresh"]::before{ content:"↻";
  font-size:20px;
  }

  /* FAB placement + spacer sizing */
  #btbar .fab{ bottom: calc(50% - var(--fab)/2 + 6px) !important;
  }
  #btbar .dock-spacer{ width: calc(var(--fab) + 16px) !important;
  height:1px !important;
  };
}

/* =====================================
   “More …” menu (Compare, OR View, User)
   =====================================*/

/* Hide the separate user button on mobile (we’ll show it inside More) */
@media (max-width: 820px){
  #btbar .user-dropdown{ display: none !important;
  };
}

/* Show the .dock-more trigger on phones; keep it hidden on wide screens */
#btbar .dock-more{
  display: none;
}
@media (max-width: 820px){
  #btbar .dock-more{ display: flex; }
  #btbar .dock-more .dock-btn{
    width: 44px !important; height: 40px !important;
  }
  #btbar .dock-more .dock-btn::before{ content:"…"; font-size:24px; line-height:1; }
}

/* The dropdown panel itself: never overflow the screen */
#btbar .dock-more .dropdown-menu{
  position: absolute;
  bottom: calc(var(--dock-h) + 10px);
  /* open upward above the dock */
  right: 0;
  /* anchor to the right edge -> no offscreen */
  left: auto;
  transform: translateY(8px);
  background: var(--pp-surface, #e0e0e0);
  color: var(--pp-ink, #333);
  border-radius: 14px;
  box-shadow: 6px 6px 14px rgba(0,0,0,.12), -6px -6px 14px rgba(255,255,255,.90);
  padding: 8px;
  min-width: 210px;
  max-width: min(92vw, 320px);
  /* clamp to viewport */
  max-height: min(60vh, 440px);
  overflow: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 120;
}
#btbar .dock-more .dropdown-menu.show{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* items inside the More menu */
#btbar .dock-more .dropdown-menu button{
  height: 40px;
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: var(--pp-surface, #e0e0e0);
  color: var(--pp-ink, #333);
  font: inherit;
  font-weight: 600;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  box-shadow: 3px 3px 6px rgba(0,0,0,.12), -3px -3px 6px rgba(255,255,255,.85);
}
#btbar .dock-more .dropdown-menu button:active{
  box-shadow: inset 3px 3px 6px rgba(0,0,0,.12), inset -3px -3px 6px rgba(255,255,255,.85);
}

/* if someone forgets to add .dock-more, iconify the long labels so it still fits */
@media (max-width: 820px){
  #btbar:not(:has(.dock-more)) .dock-btn[aria-label="Compare"]{
    width: 48px !important;
  }
  #btbar:not(:has(.dock-more)) .dock-btn[aria-label="Compare"]::before{ content:"⟷";
  font-size:22px;
  }
  #btbar:not(:has(.dock-more)) .dock-btn[aria-label="OR View"]{
    width: 48px !important;
  }
  #btbar:not(:has(.dock-more)) .dock-btn[aria-label="OR View"]::before{ content:"🏥";
  font-size:20px;
  };
}

/* bullet-proof: no stray list bullets anywhere in the dock */
#btbar .dock-list, #btbar .dock-list *{
  list-style: none !important;
}


/* ===== Bottom dock centering & spacing fix (mobile only) ===== */
@media (max-width: 820px){
  /* make the toolbar padding symmetric with safe areas */
  #btbar{
    padding-left:  calc(12px + env(safe-area-inset-left))  !important;
  padding-right: calc(12px + env(safe-area-inset-right)) !important;
  }

  /* ensure the capsule fills its box and is truly centered */
  #btbar .dock-shell{
    width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  }

  /* center the row and use a fixed gap so left/right feel equal */
  #btbar .dock-list{
    justify-content: center !important;
  /* was space-between */
    gap: clamp(10px, 4vw, 16px) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  }

  /* equal-size buttons = equal rhythm */
  #btbar .dock-btn{
    width: 44px !important;
  min-width: 44px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  font-size: 0 !important;
  }

  /* keep the spacer tight so the visual center matches the FAB */
  :root{ --fab: 58px;
  }
  #btbar .dock-spacer{ width: calc(var(--fab) + 16px) !important;
  }
  #btbar .fab{ bottom: calc(50% - var(--fab)/2 + 6px) !important;
  }

  /* glyphs for the small buttons (unchanged) */
  #btbar .dock-btn[aria-label="Left sidebar"]::before{  content:"≡";
  }
  #btbar .dock-btn[aria-label="Right sidebar"]::before{ content:"⋯";
  font-size:22px;
  }
  #btbar .dock-btn[aria-label="Refresh"]::before{       content:"↻";
  font-size:20px;
  }

  /* More menu: anchor to viewport edge so it never looks off-screen */
  #btbar .dock-more .dropdown-menu{
    right: max(10px, env(safe-area-inset-right) + 10px) !important;
  left: auto !important;
  max-width: min(92vw, 320px) !important;
  };
}

/* belt & suspenders: the toolbar/backplate may never overflow or “creep” */
#btbar, #btbar-plate{
  box-sizing: border-box !important;
  max-width: 100vw !important;
  left: 0 !important;
  right: 0 !important;
}
/* make right-sidebar icon distinct */
#btbar .dock-btn[aria-label="Right sidebar"]{
  font-size:0 !important;
  width:44px !important;
  height:40px !important;
}
#btbar .dock-btn[aria-label="Right sidebar"]::before{
  content:"⋮";
  /* vertical ellipsis for sidebar */
  font-size:22px;
  line-height:1;
}

/* keep "More" as horizontal ellipsis */
#btbar .dock-more .dropdown-btn{
  font-size:0 !important;
  width:44px !important;
  height:40px !important;
}
#btbar .dock-more .dropdown-btn::before{
  content:"…";
  /* horizontal ellipsis = More */
  font-size:24px;
  line-height:1;
}

/* teeny balance tweak so left/right margins feel equal on iOS */
@media (max-width:820px){
  #btbar{
    padding-left:  calc(12px + env(safe-area-inset-left) + 1px) !important;
  padding-right: calc(12px + env(safe-area-inset-right) + 1px) !important;
  };
}

/* ---- Login page: centered + mobile-friendly + no iOS zoom ---- */

/* Center the page and respect dynamic viewport (keyboard-safe on mobile) */























/* === FINAL: mobile sidebars as centered modal sheets=== */
@media (max-width: 820px){
  /* baseline: neutralize old slide-in behavior */
  .sidebar-left,
  .sidebar-right{
    position: fixed !important;
  transform: none !important;
  display: none !important;
  /* hidden by default */
    margin: 0 !important;
  padding: 16px !important;
  width: auto !important;
  height: auto !important;
  /* clean look */
    border-radius: 0 !important;
  overflow: visible !important;
  z-index: 12002 !important;
  /* above toolbar/overlay */
    max-width: 100vw !important;
  overflow-x: hidden !important;
  }

  /* when toggled .show -> become a centered card */
  .sidebar-left.show,
  .sidebar-right.show{
    display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(92vw, 540px) !important;
  height: min(86vh, 680px) !important;
  background: #e0e0e0 !important;
  border-radius: 22px !important;
  /* all corners round */
    overflow: hidden !important;
  /* clip corners */
    border: 1px solid rgba(0,0,0,0.06) !important;
  /* no outer shadow */
  }

  /* designate the inner scroll areas so corners stay round */
  .sidebar-left .patient-list{
    flex: 1 1 auto !important;
  }
  .sidebar-right .scrollable-content{
    flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  background: transparent !important;
  box-shadow: none !important;
  }

  /* overlay: dark + blurred, sits behind the card */
  #mobile-overlay{
    display: none;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.45) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  z-index: 12000 !important;
  }
#mobile-overlay.show{
  display: block;
  pointer-events: auto;
}


  /* inputs & selects = identical height (keep caret) */
  #search, #year-filter, #intervention-filter,
  .search-bar input, .filter-group select{
    height: 44px !important;
  line-height: 44px !important;
  padding: 0 12px !important;
  border-radius: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  }
  select{
    -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 34px !important;
  /* room for caret */
  };
}
























/* ========== Wizard Sheet (centered, clean, rounded) ========== */

.wizard-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 12000;
  display: none;
}

.wizard-overlay.show{
  display:block;
}

.wizard-sheet{
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  z-index: 12001;
}
.wizard-sheet.show{
  display: grid;
}

.wiz-card{
  width: min(92vw, 560px);
  max-height: 85vh;
  background: #e0e0e0;
  /* clean plate to match your UI */
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,0.06);
  /* no drop shadow */
  overflow: hidden;
  /* ensures bottom corners stay round */
  display: flex;
  flex-direction: column;
}

/* Header (step + close) */
.wiz-head{
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px 6px;
  background: #e0e0e0;
}
.sheet-close{
  position: absolute;
  right: 8px;
  top: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color:#333;
  font-size: 22px;
  cursor: pointer;
}
.step-pill{
  font-weight: 700;
  font-size: 14px;
  color:#555;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e0e0e0;
  box-shadow: inset 2px 2px 4px #bebebe, inset -2px -2px 4px #ffffff;
}

/* Slot that holds a moved-in sidebar */
.wiz-slot{
  flex: 1 1 auto;
  min-height: 0;
  /* let this area scroll */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 14px 14px;
}

/* When a sidebar is inside the wizard, tame its mobile fixed styles */
.wizard-sheet .sidebar-left,
.wizard-sheet .sidebar-right{
  position: static !important;
  inset: auto !important;
  transform: none !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 18px !important;
  /* inner block still rounded */
  background: transparent !important;
  /* the wiz-card provides the plate */
  box-shadow: none !important;
  /* clean look */
  display: flex !important;
  flex-direction: column !important;
  gap: 12px;
  overflow: visible !important;
  /* scroll happens on .wiz-slot */;
}

/* Hide internal mobile “close/toggle” buttons while inside wizard */
.wizard-sheet .mobile-close,
.wizard-sheet .sidebar-toggle-button{
  display: none !important;
}

/* Make the intended scrollers own the scroll (keeps corners round) */
.wizard-sheet .sidebar-left .patient-list{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.wizard-sheet .sidebar-right #intervention-view,
.wizard-sheet .sidebar-right .scrollable-content{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Uniform control height + caret (keeps your dropdown icon) */
:root{
  --ctrl-h:44px;
  --ctrl-radius:14px;
  --ctrl-pad:12px;
}
#search, #year-filter, #intervention-filter,
.search-bar input, .filter-group select{
  height: var(--ctrl-h) !important;
  line-height: var(--ctrl-h) !important;
  padding: 0 var(--ctrl-pad) !important;
  border-radius: var(--ctrl-radius) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
select{
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 34px !important;
}

/* Tiny selection flash (nice feedback) */
@keyframes pickFlash {
  from { background:#d6d6d6;
  } to { background:#e0e0e0;
  };
}
.patient-item.flash, .date-item.flash{
  animation: pickFlash .18s ease-in-out;
}


/* —— Wizard: no horizontal scroll, ever —— */
html.modal-open, body.modal-open {
  overflow: hidden !important;
}

.wizard-sheet, .wiz-card, .wiz-slot {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

.wiz-card, .wiz-card * {
  box-sizing: border-box !important;
}

/* Sidebars inside wizard may never exceed the card width */
.wizard-sheet .sidebar-left,
.wizard-sheet .sidebar-right {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  box-shadow: none !important;
  /* clean plate */
  background: transparent !important;
  /* wiz-card supplies background */
  border-radius: 18px !important;
}

/* Ensure inner items can’t push width */
.wizard-sheet .patient-item,
.wizard-sheet .intervention-group,
.wizard-sheet .date-item {
  max-width: 100% !important;
}

/* Inputs/selects uniform height and no overflow */
.wizard-sheet #search,
.wizard-sheet #year-filter,
.wizard-sheet #intervention-filter,
.wizard-sheet .search-bar input,
.wizard-sheet .filter-group select {
  height: 44px !important;
  line-height: 44px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 12px !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
}

/* Keep dropdown caret visible */
.wizard-sheet select{
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 34px !important;
}
.wiz-head{
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 6px;
  padding: 10px 12px 6px;
  background: #e0e0e0;
}
.sheet-back, .sheet-close{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color:#333;
  font-size: 20px;
  cursor: pointer;
}
.wiz-titles{
  text-align: center;
}
.wiz-title{
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color:#333;
}
.wiz-sub{
  margin-top: 2px;
  font-size: 13px;
  color:#666;
}





/* === Mobile sidebars: tiny corner “X” close button === */
@media (max-width: 820px){
  /* show only when a sidebar is open */
  .sidebar-left.show .mobile-close,
  .sidebar-right.show .mobile-close{
    display: inline-flex !important;
  }

  /* style + pin to the top-right of each sidebar card */
  .sidebar-left .mobile-close,
  .sidebar-right .mobile-close{
    position: absolute !important;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #e0e0e0;
  color: #333;
  font-size: 18px;
  /* the ✕ glyph size */
    line-height: 1;
  align-items: center;
  justify-content: center;
  box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
  z-index: 12003;
  /* above the sidebar content */
    cursor: pointer;
  }

  .sidebar-left .mobile-close:hover,
  .sidebar-right .mobile-close:hover{
    filter: brightness(0.98);
  }
  .sidebar-left .mobile-close:active,
  .sidebar-right .mobile-close:active{
    box-shadow: inset 5px 5px 10px rgba(0,0,0,.12),
                inset -5px -5px 10px rgba(255,255,255,.82);
  }

  /* belt & suspenders: if any earlier CSS hides it */
  .mobile-close{ visibility: visible !important;
  opacity: 1 !important;
  };
}

/* Add-patient sheet width harmony with sidebars */
#add-patient-sheet .wiz-card {
  border-radius: 22px;
}
#addPatientForm .submit-btn {
  margin-top: 6px;
}

/* Make the inner form breathe without re-styling your global .form-container */
#addPatientForm .form-row {
  gap: 20px;
}




















/* ---------------- Add Patient sheet: visual + layout (FULL REPLACE) ---------------- */
#add-patient-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  opacity:0;
  pointer-events:none;
  transition:.18s ease;
  z-index:1000;
}
#add-patient-overlay.show{
  opacity:1;
  pointer-events:auto;
}

#add-patient-sheet{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  transform: translateY(10px) scale(.985);
  opacity:0;
  pointer-events:none;
  transition: transform .2s ease, opacity .2s ease;
  z-index:1001;
}
#add-patient-sheet.show{
  transform:none;
  opacity:1;
  pointer-events:auto;
}

#add-patient-sheet .wiz-card{
  width:min(980px, 94vw);
  max-height:86vh;
  overflow:auto;
  border-radius:28px;
  background:#e8eaed;
  box-shadow: 0 20px 40px rgba(0,0,0,.15), inset 2px 2px 0 rgba(255,255,255,.35);
  padding:8px 0 18px;
}

/* header */
#add-patient-sheet .wiz-head{
  position:sticky;
  top:0;
  z-index:1;
  background:linear-gradient(#eceff1,#e6e8ec);
  border-top-left-radius:28px;
  border-top-right-radius:28px;
  padding:18px 22px 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), inset 0 -1px 0 rgba(255,255,255,.5);
  display:grid;
  grid-template-columns: 48px 1fr 48px;
  align-items:center;
}
#add-patient-sheet .sheet-close{
  justify-self:end;
  background:none;
  border:0;
  font-size:22px;
  cursor:pointer;
}
#add-patient-sheet .wiz-title{
  margin:0;
  font-size:34px;
  line-height:1.1;
  text-align:center;
}
#add-patient-sheet .wiz-sub{
  text-align:center;
  color:#666;
  margin-top:4px;
}

/* content container — kill any global max-width/margins */
#add-patient-sheet .wiz-slot{
  padding:16px 22px 6px;
}
#add-patient-sheet .form-container{
  background:transparent;
  box-shadow:none;
  padding:0;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}

/* neumorphic inputs */
#add-patient-sheet input[type="text"],
#add-patient-sheet input[type="email"],
#add-patient-sheet input[type="number"],
#add-patient-sheet input[type="date"],
#add-patient-sheet select{
  width:100%;
  border:0;
  outline:0;
  border-radius:14px;
  padding:10px 12px;
  background:linear-gradient(#f1f2f4,#e7e9ec);
  box-shadow:
    inset 3px 3px 6px rgba(0,0,0,.08),
    inset -3px -3px 6px rgba(255,255,255,.75);
}

/* labels (like original) */
#add-patient-sheet label{
  display:block;
  font-weight:600;
  color:#404040;
  margin:8px 0 6px;
}

/* rows */
#add-patient-sheet .form-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  /* real 3-up */
  gap:16px;
  align-items:end;
}
#add-patient-sheet .form-row .form-group{
  min-width:0;
}
#add-patient-sheet .form-row-full{
  margin:8px 0;
}

/* last row: 2/1 ratio (select wider, date narrower) */
#add-patient-sheet .form-row:has(#intervention){
  grid-template-columns: 2fr 1fr;
}

/* submit */
#add-patient-sheet .submit-btn{
  display:block;
  width:100%;
  height:56px;
  border:0;
  border-radius:12px;
  background:#51b04f;
  color:#fff;
  font-weight:800;
  font-size:20px;
  box-shadow: 0 10px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.45);
}
#add-patient-sheet .submit-btn:active{
  transform: translateY(1px);
}

/* ==================== MOBILE: edge-to-edge, still 3-up ==================== */
@media (max-width: 820px){
  /* stretch the dialog horizontally (remove centered narrow card) */
  #add-patient-sheet{ justify-items:stretch;
  }

  /* true full-width card (no big side gutters) */
  #add-patient-sheet .wiz-card{
    width:100vw;
  max-width:none;
  margin:0;
  border-radius:16px;
  /* set to 0 for total edge-to-edge */
    max-height:calc(100vh - 6vh);
  }

  /* tighter internal paddings so inputs can use the width */
  #add-patient-sheet .wiz-head{ padding:14px 12px;
  }
  #add-patient-sheet .wiz-slot{ padding:12px 10px 8px;
  }

  /* keep THREE inputs per row; use minmax to avoid shrink issues */
  #add-patient-sheet .form-row{
    grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
  }

  /* same 2/1 ratio on the last row */
  #add-patient-sheet .form-row:has(#intervention){
    grid-template-columns: 2fr 1fr;
  }

  /* compact control sizing (16px font to avoid iOS zoom) */
  #add-patient-sheet label{ margin:6px 0 4px;
  font-size:15px;
  }
  #add-patient-sheet input[type="text"],
  #add-patient-sheet input[type="email"],
  #add-patient-sheet input[type="number"],
  #add-patient-sheet input[type="date"],
  #add-patient-sheet select{
    height:42px;
  padding:8px 10px;
  font-size:16px;
  }
  #add-patient-sheet .submit-btn{ height:52px;
  font-size:18px;
  };
}

@media (max-width: 430px){
  #add-patient-sheet .wiz-title{ font-size:26px; }
  #add-patient-sheet label{ font-size:14px; }
  #add-patient-sheet .form-row{ gap:8px; }
}

/* material symbols helper */
.msr{
  font-family:"Material Symbols Rounded";
  font-weight:normal;
  font-style:normal;
  line-height:1;
  display:inline-block;
  vertical-align:middle;
  font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
}

/* size per area */
.topbar-button .msr{
  font-size:22px;
}
#btn-native-capture .msr{
  font-size:20px;
}
.dock-btn .msr{
  font-size:24px;
}
#fab-add .msr{
  font-size:28px;
}

/* keep button layout tidy if a label is present */
.btn-text{
  white-space:nowrap;
}

/* ——— MOBILE FREEZE HOTFIX ——— */


  /* Make sure sidebars always sit above and are clickable */
  .sidebar-left.show,
  .sidebar-right.show{
    z-index: 12010 !important;         /* above overlay, dock, fullscreen */
    display: flex !important;
    pointer-events: auto !important;
  }
}
/* prevent legacy overlay from covering the new side-sheet when open */
@media (max-width: 600px){
  #side-sheet.open ~ #mobile-overlay { display: none !important; }
}

/* selection mode: replace topbar actions with the selection bar */
#topbar-actions-select{display:none;gap:10px;align-items:center}

/* when selecting, hide all other row-2 controls */
.is-selecting .topbar .topbar-row-2 .topbar-center > *:not(#topbar-actions-select){
  display:none !important;
}

/* force the selection bar visible while selecting */
.is-selecting #topbar-actions-select{
  display:flex !important;
}


/* iOS: never focus-zoom inputs by keeping them >=16px */
@supports (-webkit-touch-callout: none) {
  input, select, textarea, .topbar-name-input {
    font-size: 16px !important;   /* critical for iOS */
    line-height: 1.2;
    min-height: 44px;              /* good tap target */
  }
}

/* Remove double-tap zoom on buttons/links */
button, .topbar-button, .dock-btn, .toolbar-button, a {
  touch-action: manipulation;
}


/* keep only the floating rounded dock; hide the backplate */
#btbar-plate{
  background: transparent !important;
  box-shadow: none !important;
}
























/* === TOPBAR — pill fills space between arrows, tidy gaps, equal margins === */
.topbar{
  --tb-gutter: clamp(12px, 2vw, 22px);  /* space from container edge to each arrow */
  --tb-gap:    28px;                    /* space between arrow and pill */
  --tb-arrow:  44px;                    /* arrow button size */
}

/* 5-col grid: gutter | ← | [PILL GROWS] | → | gutter */
.topbar .topbar-row-1{
  display: grid !important;
  grid-template-columns:
    var(--tb-gutter) var(--tb-arrow) minmax(0,1fr) var(--tb-arrow) var(--tb-gutter) !important;
  align-items: center;
  column-gap: var(--tb-gap);
  min-width: 0;
  box-sizing: border-box;
  position: relative;
}

/* arrows: fixed size, above the pill just in case */
.topbar .topbar-row-1 .topbar-button{
  grid-row: 1;
  width: var(--tb-arrow) !important;
  height: var(--tb-arrow) !important;
  display: grid;
  place-items: center;
  position: static !important;
  z-index: 2;
}
#toggle-left  { grid-column: 2; }
#toggle-right { grid-column: 4; }

/* pill: takes ALL the space between arrows, never capped */
.topbar .topbar-name-age{
  grid-column: 3 !important;
  justify-self: center;
  display: flex !important;
  align-items: center;
  gap: 12px;
  width: 100% !important;
  max-width: none !important;   /* kill previous caps */
  min-width: 0;
  margin: 0 !important;
  overflow: hidden;
  position: static !important;
  z-index: 1;
  padding-inline: clamp(12px, 1.4vw, 18px) !important; /* keeps text off the edges */
}

/* name: grows, ellipsizes neatly */
.topbar .topbar-name-input{
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  font-size: clamp(18px, 2.6vw, 28px);
}

/* age: compact, never pushes arrows */
#topbar-patient-age{
  flex: 0 0 auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  opacity: .85;
  position: static !important;
}

@media (max-width: 820px){
  .topbar{ --tb-gutter: 12px; --tb-gap: 10px; --tb-arrow: 40px; }
}


/* Default (fallback for browsers without container queries) */
.topbar .topbar-name-input {
  /* scales with viewport */
  font-size: clamp(16px, 2.6vw, 34px);
  line-height: 1.2;
}

/* Prefer container-based scaling when supported */
@supports (container-type: inline-size) {
  /* make the pill a query container */
  .topbar .topbar-name-age {
    container-type: inline-size;     /* 1cqi = 1% of this pill's width */
  }

  .topbar .topbar-name-input {
    /* scales with the pill, not the whole viewport */
    font-size: clamp(16px, 6cqi, 34px);
    line-height: 1.2;
  }

  /* keep the age label readable but flexible too */
  #topbar-patient-age {
    font-size: clamp(14px, 4cqi, 20px);
  }
}




#fullscreen-viewer{ position:fixed; inset:0; }
.fs-media-wrap{ position:relative; }
#fs-loader{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:transparent; }
#fs-loader .fs-spinner{ width:48px; height:48px; border-radius:50%; border:4px solid rgba(255,255,255,.25); border-top-color:#fff; animation:fs-spin 1s linear infinite; }
@keyframes fs-spin{to{transform:rotate(360deg)}}



  .fs-media-wrap{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px;
    min-height:40vh;
  }
  .fs-media-wrap img, .fs-media-wrap video{
    max-width:100%;
    max-height:calc(100vh - 120px);
    display:block;
  }




.topbar button[onclick="openVideoCapture()"] {
  display: none !important;
}




























/* ========================= */
/* implant chevron bubble    */
/* ========================= */

.topbar-chevron-implant {
  position: absolute;
  bottom: -29px;
  left: calc(50% + 60px);
  transform: translateX(-50%);
  background: #e0e0e0;
  color: #555;
  font-size: 1.1rem;
  line-height: 1.2;
  padding: 3px 10px;
  border-radius: 10px;
  box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
  cursor: pointer;
  transition: all 0.25s ease;
  z-index: 10;
  user-select: none;
}

.topbar-chevron-implant.rotated {
  transform: translateX(-50%) rotate(180deg);
}

.topbar-chevron-implant:hover {
  background: #f5f5f5;
  transform: translateX(-50%) scale(1.08);
}

/* ========================= */
/* collapsible wrapper       */
/* ========================= */

#topbar-implant-info {
  overflow: hidden;
  max-height: 0;
  transition:
    max-height 0.4s ease,
    padding 0.3s ease,
    margin-bottom 0.3s ease;
  padding: 0 16px;
  margin: 0 10px;
  border-radius: 16px;
  background: #e0e0e0;
  box-shadow:
    inset 4px 4px 8px #bebebe,
    inset -4px -4px 8px #ffffff;
}

#topbar-implant-info.open {
  max-height: 700px;
  padding-top: 16px;
  padding-bottom: 16px;
  margin-bottom: 8px;
}

/* keep this class for compatibility with your JS */
.topbar-implant-info {
  padding: 0;
  background: transparent;
  border-bottom: 0;
}

/* ========================= */
/* single outer card         */
/* ========================= */

.implant-outer-shell {
  background: #efefef;
  border-radius: 12px;
  box-shadow:
    3px 3px 8px rgba(0,0,0,0.22),
    -3px -3px 8px rgba(255,255,255,0.9);
  padding: 12px 14px 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  color: #2a2a2a;

  display: grid;
  grid-auto-rows: min-content;
  row-gap: 14px;
}

/* ========================= */
/* row 1 = 4 fixed columns   */
/* ========================= */

.impl-row-1 {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* always 4 cols */
  column-gap: 12px;
  row-gap: 10px;
  align-items: start;

  /* if viewport is too narrow, you can horizontal-scroll */
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #bfbfbf transparent;
}
.impl-row-1::-webkit-scrollbar {
  height: 5px;
}
.impl-row-1::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 999px;
}
.impl-row-1::-webkit-scrollbar-track {
  background: transparent;
}

.impl-field-block {
  display: flex;
  flex-direction: column;
  min-width: 0; /* long words can shrink instead of overflowing */
}

.impl-field-label {
  font-size: 14px;
  font-weight: 600;
  color: #2a2a2a;
  text-align: center;
  margin-bottom: 4px;
  line-height: 1.3;
}

/* ========================= */
/* row 2 = 2 breast cards    */
/* ========================= */

.impl-row-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* always 2 cols */
  column-gap: 12px;
  row-gap: 12px;
  align-items: start;

  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #bfbfbf transparent;
}
.impl-row-2::-webkit-scrollbar {
  height: 5px;
}
.impl-row-2::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 999px;
}
.impl-row-2::-webkit-scrollbar-track {
  background: transparent;
}

/* ========================= */
/* breast cards              */
/* ========================= */

/* fieldset visual */
.breast-card {
  position: relative;
  background: #efefef;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.2);
  box-shadow:
    2px 2px 5px rgba(0,0,0,0.18),
    -2px -2px 5px rgba(255,255,255,0.9);

  padding: 12px;
  padding-top: 18px; /* space under legend line */
  display: flex;
  flex-direction: column;
  row-gap: 14px;

  min-width: 0;
  margin: 0; /* reset default fieldset margins */
}

/* legend:
   - sits on the border "hairline"
   - no pill bg
   - centered above each card
*/
.breast-legend {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: #2a2a2a;
  text-align: center;
  padding: 0 6px;
  margin: 0 auto;
  background: transparent;  /* transparent so we see the border behind */
  max-width: max-content;
}

/* inner blocks in each breast card */
.breast-field-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.breast-field-label {
  font-size: 15px;
  line-height: 1.3;
  font-weight: 600;
  color: #2a2a2a;
  text-align: center;
  margin-bottom: 6px;
}

/* ========================= */
/* INPUT + SELECT SKIN       */
/* match patient-info style  */
/* ========================= */

/* base style shared by <input> and <select> inside implant panel */
#topbar-implant-info .impl-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;

  /* same soft grey inset look as patient info fields */
  background: #e9e9e9;
  border: 0;
  border-radius: 14px;

  font-size: 14px;
  line-height: 1.3;
  padding: 10px 14px;
  color: #222;

  box-shadow:
    inset 3px 3px 6px rgba(0,0,0,0.18),
    inset -3px -3px 6px rgba(255,255,255,0.85);

  /* remove default browser dropdown chrome */
  -webkit-appearance: none;
  appearance: none;
  background-image: none;
  padding-right: 34px; /* we'll draw our own arrow */
}

/* custom chevron for selects (no white box, no stolen space) */
#topbar-implant-info select.impl-input {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M7 10l5 5 5-5' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
}
#topbar-implant-info select.impl-input::-ms-expand {
  display: none;
}

/* numeric inputs keep native spinner rules but match bg */
#topbar-implant-info input[type="number"].impl-input {
  padding-right: 12px;
}

/* focus */
#topbar-implant-info .impl-input:focus {
  outline: none;
  box-shadow:
    inset 2px 2px 5px rgba(0,0,0,0.22),
    inset -2px -2px 5px rgba(255,255,255,0.9),
    0 0 0 2px rgba(0,0,0,0.06); /* soft outer ring */
}

/* placeholder style similar to patient-info */
#topbar-implant-info .impl-input::placeholder {
  color: #7b7b7b;
  opacity: 1;
}

/* ========================= */
/* RESPONSIVE fallback       */
/* ========================= */

@media (max-width: 700px) {
  /* if screen super tiny, let row1 scroll instead of breaking layout */
  .impl-row-1 {
    min-width: 600px; /* force horizontal scroll instead of wrapping */
  }

  .impl-row-2 {
    min-width: 600px; /* same idea for left/right cards row */
  }

}










  .dup-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 10px;
  }
  .dup-thumbs img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
  }






/* duplicate picker */
  #duplicatePatientModal .dup-thumbs{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
    gap:8px;margin-top:8px
  }
  #duplicatePatientModal .dup-card{
    border:1px solid rgba(0,0,0,.12);border-radius:8px;overflow:hidden;background:#fff
  }
  #duplicatePatientModal .dup-card img{
    width:100%;height:90px;object-fit:cover;display:block;background:#f2f2f2
  }
  #duplicatePatientModal .dup-note{
    font-size:12px;padding:6px 8px;color:#555;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
  }
  #duplicatePatientModal .control-btn{margin:0 6px}


/* ========================================================= */
/* COLOR VARIABLES (tune these to EXACT brand colors later)  */
/* ========================================================= */

/* ==== exact colors from your annotated image ==== */
:root{
  /* band labels */
  --mini-accent:   #996666;
  --demi-accent:   #663366;
  --full-accent:   #333333;

  /* column tints (same hue, soft alpha) */
  --mini-col-bg:   rgba(153,102,102,0.12); /* #996666 @12% */
  --demi-col-bg:   rgba(102, 51,102,0.12); /* #663366 @12% */
  --full-col-bg:   rgba( 51, 51, 51,0.10); /* #333333 @10% */

  /* left sidebar stripes (balloon sizes) */
  --balloon80-bg:  #336699;
  --balloon90-bg:  #003300;
  --balloon100-bg: #330033;

  /* chrome */
  --modal-bg:      #f2f2f2;
  --modal-header:  #eaeaea;
  --border-dark:   rgba(0,0,0,0.28);
  --border-soft:   rgba(0,0,0,0.08);
  --txt-main:      #222;
}

/* curves and headers pick up the accents already */
.mini-head,.mini-curve { color: var(--mini-accent); border-color: var(--mini-accent); }
.demi-head,.demi-curve { color: var(--demi-accent); border-color: var(--demi-accent); }
.full-head,.full-curve { color: var(--full-accent); border-color: var(--full-accent); }

/* column backgrounds */
.mini-col { background: var(--mini-col-bg); }
.demi-col { background: var(--demi-col-bg); }
.full-col { background: var(--full-col-bg); }

/* catalog “pill” outline colors per column */
.mini-col  .cat-cell { border-color: rgba(153,102,102,0.55); box-shadow: 0 1px 2px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.4) inset; }
.demi-col  .cat-cell { border-color: rgba(102, 51,102,0.55); }
.full-col  .cat-cell { border-color: rgba( 51, 51, 51,0.55); }

/* balloon size stripes (left column) */
.balloon-80  { background: var(--balloon80-bg); }
.balloon-90  { background: var(--balloon90-bg); }
.balloon-100 { background: var(--balloon100-bg); }

/* stronger family styling (optional) */
.mini-col .cat-cell { background: #fff; border-color: var(--mini-accent); color: var(--mini-accent); }
.demi-col .cat-cell { background: #fff; border-color: var(--demi-accent); color: var(--demi-accent); }
.full-col .cat-cell { background: #fff; border-color: var(--full-accent); color: var(--full-accent); }

.mini-col.cat-solid { background: var(--mini-cell) !important; color:#fff; }
.demi-col.cat-solid { background: var(--demi-cell) !important; color:#fff; }
.full-col.cat-solid { background: var(--full-cell) !important; color:#fff; }


/* ========================================================= */
/* MODAL SHELL                                               */
/* ========================================================= */

.catalogue-open-btn {
  font-size: 13px;
  line-height: 1.2;
  border-radius: 8px;
  border: 0;
  background: #e0e0e0;
  padding: 6px 10px;
  box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
  cursor: pointer;
}
.catalogue-open-btn:active {
  box-shadow: inset 4px 4px 8px #bebebe, inset -4px -4px 8px #ffffff;
}

.catalogue-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  box-sizing: border-box;
}

.catalogue-modal {
  background: var(--modal-bg);
  border-radius: 12px;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.5),
    4px 4px 8px #bebebe,
    -4px -4px 8px #ffffff;
  max-width: min(1100px, 95vw);
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  color: var(--txt-main);
}

.catalogue-modal-header {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  background: var(--modal-header);
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding: 12px 16px;
  row-gap: 8px;
}

.catalogue-modal-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.catalogue-modal-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #333;
}

.pick-side {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  line-height: 1.2;
  color: #444;
}
.pick-side-opt {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}
.pick-side-opt input[type="radio"] {
  accent-color: #555;
}

.catalogue-close-btn {
  background: transparent;
  border: 0;
  font-size: 20px;
  line-height: 1;
  font-weight: 500;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  color: #444;
  height: 24px;
}
.catalogue-close-btn:hover {
  background: rgba(0,0,0,0.07);
}

/* scroll area */
.catalogue-table-wrapper {
  flex: 1 1 auto;
  overflow: auto;
  background: #fff;
  padding: 16px;
}

/* ========================================================= */
/* TABLE BASE                                                */
/* ========================================================= */

.catalogue-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 1000px; /* stays wide like original chart */
  font-size: 13px;
  line-height: 1.35;
  color: #1a1a1a;
  text-align: center;
  border: 1px solid var(--border-dark);
  border-radius: 6px;
  background: #fff;
}

/* general header cells */
.catalogue-table thead th {
  font-weight: 600;
  color: #2a2a2a;
  background: #efefef;
  border-right: 1px solid rgba(0,0,0,0.15);
  border-bottom: 1px solid rgba(0,0,0,0.25);
  padding: 8px 6px;
  white-space: nowrap;
  vertical-align: middle;
}
.catalogue-table thead th:last-child {
  border-right: 0;
}

/* top band row */
.band-row th {
  font-size: 15px;
  line-height: 1.3;
  background: #dedede;
  color: #2a2a2a;
}
.band-label-top {
  font-weight: 600;
  margin-bottom: 4px;
}
.band-curve {
  width: 48px;
  height: 20px;
  border-radius: 100px 100px 40px 40px / 60px 60px 20px 20px;
  margin: 0 auto;
  border: 2px solid currentColor;
  background: transparent;
}

/* give each band its PDF color */
.mini-head  { color: var(--mini-accent); }
.demi-head  { color: var(--demi-accent); }
.full-head  { color: var(--full-accent); }

.mini-curve { border-color: var(--mini-accent); }
.demi-curve { border-color: var(--demi-accent); }
.full-curve { border-color: var(--full-accent); }

/* subheader row */
.subhead-row th {
  font-size: 12px;
  line-height: 1.25;
  background: #efefef;
}
.sub {
  font-size: 11px;
  font-weight: 400;
  color: #555;
}

/* ========================================================= */
/* BODY CELLS                                                */
/* ========================================================= */

.catalogue-table tbody td {
  padding: 10px 8px;
  border-right: 1px solid rgba(0,0,0,0.1);
  border-bottom: 1px solid var(--border-soft);
  background: #fff;
  vertical-align: middle;
  white-space: nowrap;
  font-size: 13px;
}
.catalogue-table tbody td:last-child {
  border-right: 0;
}

/* Balloon column styling */
.balloon-col {
  color: #fff;
  font-weight: 600;
  text-align: left;
  min-width: 140px;
  padding: 10px;
  border-right: 1px solid rgba(0,0,0,0.3);
  border-bottom: 1px solid var(--border-soft);
  line-height: 1.35;
  vertical-align: top;
}
.balloon-mm {
  font-size: 14px;
}
.balloon-note {
  font-size: 11px;
  font-weight: 400;
  margin-top: 8px;
  line-height: 1.3;
}

/* match the PDF sidebars */
.balloon-80  { background: var(--balloon80-bg); }
.balloon-90  { background: var(--balloon90-bg); }
.balloon-100 { background: var(--balloon100-bg); }

.diameter-col {
  font-weight: 500;
  background: #f8f8f8;
}

/* tinted minis / demi / full columns */
.mini-col  { background: var(--mini-col-bg); }
.demi-col  { background: var(--demi-col-bg); }
.full-col  { background: var(--full-col-bg); }

.dim  { font-weight:500; }
.vol  { font-weight:600; }

/* thick rule after each balloon section */
.section-divider-bottom td {
  border-bottom: 3px solid rgba(0,0,0,0.3);
}

/* ========================================================= */
/* CLICKABLE CELLS                                           */
/* ========================================================= */

.cat-cell {
  all: unset;
  display: inline-block;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  color: #000;
  /* subtle border to appear like a button */
  border: 1px solid rgba(0,0,0,0.2);
  background: rgba(255,255,255,0.6);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.2),
    0 0 0 1px rgba(255,255,255,0.4) inset;
}
.cat-cell:hover {
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.4) inset,
    0 2px 4px rgba(0,0,0,0.3);
}
.cat-cell.active {
  background: #fff;
  box-shadow:
    0 0 0 2px #000 inset,
    0 2px 4px rgba(0,0,0,0.4);
}

/* sticky header so you can scroll table body and still see columns */
.catalogue-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}
.band-row th {
  top: 0;
  z-index: 3;
}
.subhead-row th {
  top: 32px; /* ~height of first header row */
  z-index: 4;
}

/* responsive minor tweaks */
@media (max-width:600px){
  .catalogue-modal-title { font-size:13px; }
  .catalogue-table       { font-size:12px; }
  .catalogue-table thead th { font-size:12px; }
  .band-row th { font-size:13px; }
  .balloon-col { min-width:130px; }
}

















/* implant panel footer */
.impl-footer{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.75rem;
  padding: 14px 12px;                  /* space from card edges */
  margin: 6px 15px 10px;               /* the “green zone” spacing in your screenshot */
  border-radius: 18px;
  background: transparent;             /* keep panel look; no extra box */
}

/* reuse the mini pill look used in the chevron, but inside panel */
.impl-footer .mini-btn{
  padding:.5rem 1rem;
  font-size:.95rem;
  line-height:1.1;
  border:none;
  border-radius:999px;
  background: var(--neo-btn, #e6e6e6);
  box-shadow: 3px 3px 6px rgba(0,0,0,.08), -3px -3px 6px rgba(255,255,255,.9);
  cursor:pointer;
}
.impl-footer .mini-btn:active{
  transform: translateY(1px);
}





#sd-preview-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  /* important for scroll-zoom */
  overflow: hidden;
}

#sd-preview-modal.hidden {
  display: none;
}

#sd-preview-image {
  max-width: 95vw;
  max-height: 95vh;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);

  /* zoom stuff */
  transform-origin: center center;
  transition: transform 0.08s linear;
  cursor: zoom-in;
}








/*ascund provizoriu butonul de implant */
#implant-button {
  display: none !important;
}