.hazard-description-block {
  margin: 4px 0 !important;
  padding: 0 !important;
}

/* Details tab: same size/color for "Hazard Description" and "Mitigations Added" labels */
.details-field-label {
  padding-left: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: 0.0333333333em;
  color: rgba(0, 0, 0, 0.6);
}

.pdo-register-card {
  width: 100%;
}
/* Map-Specific Styles for map.html */

/* General Application and Cloak */
[v-cloak] {
  display: none;
}
#pinFormHeader .form-header-actions {
  display: flex;
  gap: 40px;
  align-items: center;
}
.v-application {
  position: relative !;
  height: 100vh !;
}

/* Main Content */
.v-main {
  transition: padding-left 0.3s ease !;
  height: 100vh !;
  padding-top: 48px !important;
}

/* Navigation Drawer */
.v-navigation-drawer {
  z-index: 1001 !;
}

/* Overdue PDO banner on map (when level has overdue removal dates) */
.overdue-pdo-banner {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1002;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  min-width: 280px;
  max-width: 90vw;
  background: linear-gradient(135deg, #c62828 0%, #b71c1c 100%);
  color: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}

.overdue-pdo-banner-icon {
  flex-shrink: 0;
}

.overdue-pdo-banner-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.3;
}

.overdue-pdo-banner-btn {
  flex-shrink: 0;
  text-transform: none;
}

.overdue-pdo-banner-close {
  flex-shrink: 0;
  margin-left: 4px;
}

body.dark-mode .overdue-pdo-banner {
  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Map Container */
#map-container,
#map {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  background: #ddd !important;
}

.leaflet-container {
  z-index: 0 !important;
}

/* Dialogs */
.v-dialog__content {
  pointer-events: none;
}

.v-dialog__content.v-dialog__content--active {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: auto !important;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9999 !important;
}

/* Hide inactive modals until Vue is ready to prevent flash */
#app:not([data-vue-ready]) .v-dialog__content:not(.v-dialog__content--active) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.v-dialog {
  background: transparent;
  box-shadow: none;
}
.v-dialog .v-card {
  border-radius: 0;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4);
}

/* PDO register dialog card shadow - removed */
.v-dialog__content .v-dialog.pdo-register-dialog .v-card,
.v-dialog__content .v-dialog.pdo-register-dialog.v-dialog .v-card,
.v-dialog.pdo-register-dialog .v-card,
.pdo-register-dialog.v-dialog .v-card,
.pdo-register-dialog .v-card {
  box-shadow: none !important;
}

/* Remove box shadow from user-settings-dialog, search-pdo-dialog and delete-image-dialog - match styling */
/* Override the global .v-dialog box-shadow rule - use same pattern as user-settings-dialog */
.v-dialog__content .v-dialog.user-settings-dialog,
.v-dialog__content .v-dialog.search-pdo-dialog,
.v-dialog__content .v-dialog.delete-image-dialog,
.v-dialog.user-settings-dialog,
.v-dialog.search-pdo-dialog,
.v-dialog.delete-image-dialog,
.user-settings-dialog.v-dialog,
.search-pdo-dialog.v-dialog,
.delete-image-dialog.v-dialog {
  box-shadow: none !important;
}

.v-dialog__content .v-dialog.user-settings-dialog .v-card,
.v-dialog__content .v-dialog.search-pdo-dialog .v-card,
.v-dialog__content .v-dialog.delete-image-dialog .v-card,
.v-dialog.user-settings-dialog .v-card,
.v-dialog.search-pdo-dialog .v-card,
.v-dialog.delete-image-dialog .v-card,
.user-settings-dialog .v-card,
.search-pdo-dialog .v-card,
.delete-image-dialog .v-card,
.user-settings-dialog.v-dialog .v-card,
.search-pdo-dialog.v-dialog .v-card,
.delete-image-dialog.v-dialog .v-card,
.user-settings-dialog-card,
.search-pdo-dialog-card,
.delete-image-dialog-card,
.user-settings-dialog-card.v-card,
.search-pdo-dialog-card.v-card,
.delete-image-dialog-card.v-card {
  box-shadow: none !important;
}

#pinFormHeader .v-btn {
  pointer-events: auto !;
}

/* Pin Form Card */
.pin-form-card {
  display: flex !;
  flex-direction: column !;
  height: 100% !;
  width: 100% !;
  overflow: hidden !;
  margin: 0 !;
  background: #ffffff !;
  position: relative !;
}

.pin-form-title {
  position: relative;
  min-height: 48px !important;
  max-height: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.pin-form-title.v-card__title {
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.removed-chip-center {
  position: absolute !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  background: #2e7d32 !important;
}

.audit-banner-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(255, 255, 255, 0.1);
  padding: 12px;
  border-radius: 4px;
}

.audit-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.audit-row .v-text-field {
  width: 283px;
  flex-shrink: 0;
}

.audit-icon-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.audit-next-review {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.audit-next-review-text {
  color: #ffffff;
}

.audit-next-review-text.overdue {
  color: #ffeb3b;
  font-weight: 600;
}

.audit-status-display {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  font-size: 0.875rem;
  color: white;
  font-weight: 500;
}

.audit-status-text {
  margin-right: 4px;
}

.audit-status-display .audit-next-review-text {
  font-size: 0.875rem;
  font-weight: 400;
  color: white;
}

.pin-move-trigger {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 12px;
  background: rgba(21, 101, 192, 0.4);
  border: 1px solid rgba(21, 101, 192, 0.9);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  padding: 0;
  cursor: pointer;
}

.pin-move-trigger .v-btn__content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pin-move-trigger:hover,
.pin-move-trigger:focus-visible {
  background: rgba(21, 101, 192, 0.6);
  border-color: rgba(21, 101, 192, 1);
}

.pin-move-icon {
  font-size: 26px !important;
  line-height: 1;
  color: #ffffff !important;
}

.dark-mode .pin-move-trigger {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

.dark-mode .pin-move-trigger:hover,
.dark-mode .pin-move-trigger:focus-visible {
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Tabs */
.v-tabs {
  height: 48px !;
  min-height: 48px !;
  max-height: 48px !;
  flex-shrink: 0 !;
  background-color: #fafafa !;
  overflow: hidden !;
}

.v-tab {
  transition: all 0.2s ease !;
  text-transform: none !;
  font-weight: 500 !;
  letter-spacing: 0.5px !;
  font-size: 14px !;
}

.v-tab--active {
  color: #1565c0 !;
}

.v-tabs-items {
  flex-grow: 1 !;
  overflow-y: auto !;
  margin: 0 !;
  padding: 0 !;
  background: #ffffff !;
  height: calc(100% - 48px - 48px) !;
}

/* Pin Form Content */
.pin-form-content {
  padding: 16px !;
  width: 100% !;
  box-sizing: border-box !;
}

/* Specific padding for Severity tab */
.v-tabs-items .v-window-item:nth-child(1) .pin-form-content {
  padding-top: 32px !;
}

/* Specific padding for Details tab */
.v-tabs-items .v-window-item:nth-child(2) .pin-form-content {
  padding-top: 32px !;
}

/* Text fields in Details tab (normal mode) */
.v-tabs-items .v-window-item:nth-child(2) .pin-form-content .v-text-field,
.v-tabs-items .v-window-item:nth-child(2) .pin-form-content .v-select,


/* Adjust padding for Description textarea */


/* Text fields in Details tab (fullscreen mode) */
.v-dialog--fullscreen .v-tabs-items .v-window-item:nth-child(2) .pin-form-content .v-text-field,
.v-dialog--fullscreen .v-tabs-items .v-window-item:nth-child(2) .pin-form-content .v-select,
.v-dialog--fullscreen 

/* Adjust padding for Description textarea in fullscreen mode */
.v-dialog--fullscreen 

.v-dialog--fullscreen .pin-form-content {
  padding: 16px !;
}

.pin-form-content .v-text-field,
.pin-form-content .v-select {
  margin-bottom: 12px !;
}

.pin-form-content .v-text-field__slot label,
.pin-form-content .v-select__slot label {
  font-size: 14px !;
  color: #424242 !;
}

.risk-selection {
  font-weight: 600;
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
}

.inline-field-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  column-gap: 16px;
  row-gap: 8px;
}

.inline-switch {
  margin: 0 !important;
  padding: 0 !important;
}

.inline-switch .v-input__slot,
.inline-switch .v-input__control {
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
}

.inline-switch .v-label {
  white-space: nowrap;
  font-weight: 400;
  color: #424242 !important;
  font-size: 12px !important;
}

.inline-switch .v-input--switch__track {
  opacity: 0.6;
}

.v-list-item.risk-option-low {
  background-color: rgba(76, 175, 80, 0.18) !important;
  color: #1b5e20 !important;
}

.v-list-item.risk-option-low .v-list-item__title {
  color: #1b5e20 !important;
  font-weight: 600;
}

.risk-selection.risk-option-low {
  background-color: rgba(76, 175, 80, 0.18) !important;
  color: #1b5e20 !important;
}

.v-list-item.risk-option-medium {
  background-color: rgba(255, 167, 38, 0.22) !important;
  color: #e65100 !important;
}

.v-list-item.risk-option-medium .v-list-item__title {
  color: #e65100 !important;
  font-weight: 600;
}

.risk-selection.risk-option-medium {
  background-color: rgba(255, 167, 38, 0.22) !important;
  color: #e65100 !important;
}

.v-list-item.risk-option-high {
  background-color: rgba(229, 57, 53, 0.18) !important;
  color: #b71c1c !important;
}

.v-list-item.risk-option-high .v-list-item__title {
  color: #b71c1c !important;
  font-weight: 600;
}

.risk-selection.risk-option-high {
  background-color: rgba(229, 57, 53, 0.18) !important;
  color: #b71c1c !important;
}

@media (max-width: 960px) {
  .inline-field-row {
    flex-wrap: wrap;
  }
  .inline-field-row .inline-switch {
    margin-top: 8px !important;
  }
}

.pin-form-content .pdo-type-manage-btn {
  margin-right: 8px !important;
  padding: 0 !important;
  height: 28px !important;
  width: 28px !important;
}

.pin-form-content .pdo-type-manage-btn .v-icon {
  font-size: 18px !important;
}

.pin-form-content .v-text-field--disabled input {
  color: black !;
}

/* Textarea */
.auto-resize-textarea {
  resize: none !;
  overflow: hidden !;
  min-height: 100px !;
  line-height: 1.5 !;
  padding: 8px 8px 8px 0 !;
  width: 100% !;
  box-sizing: border-box !;
  border: none !; /* Remove border */
  border-radius: 4px !;
}

.auto-resize-textarea:focus {
  outline: none !;
  border-color: #1565c0 !;
}

/* Rich Text Editor Styles */
.rich-text-editor-wrapper {
  width: 100%;
  min-height: 100px;
  margin-bottom: 8px;
}

.rich-text-editor-wrapper .ql-container {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  min-height: 100px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.rich-text-editor-wrapper .ql-editor {
  min-height: 100px;
  padding: 8px 12px;
}

.rich-text-editor-wrapper .ql-toolbar {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.38);
  border-bottom: none;
  background: #fafafa;
}

.rich-text-editor-wrapper .ql-container {
  border: 1px solid rgba(0, 0, 0, 0.38);
  border-top: none;
}

.rich-text-editor-wrapper .ql-container.ql-snow {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.rich-text-editor-wrapper .ql-editor.ql-blank::before {
  font-style: normal;
  color: rgba(0, 0, 0, 0.38);
}

.rich-text-editor-wrapper .ql-toolbar .ql-stroke {
  stroke: rgba(0, 0, 0, 0.87);
}

.rich-text-editor-wrapper .ql-toolbar .ql-fill {
  fill: rgba(0, 0, 0, 0.87);
}

.rich-text-editor-wrapper .ql-toolbar button:hover,
.rich-text-editor-wrapper .ql-toolbar button.ql-active {
  color: #1976d2;
}

.rich-text-editor-wrapper .ql-toolbar button:hover .ql-stroke,
.rich-text-editor-wrapper .ql-toolbar button.ql-active .ql-stroke {
  stroke: #1976d2;
}

.rich-text-editor-wrapper .ql-toolbar button:hover .ql-fill,
.rich-text-editor-wrapper .ql-toolbar button.ql-active .ql-fill {
  fill: #1976d2;
}

/* Readonly mode styling */
.rich-text-editor-wrapper .ql-container.ql-disabled {
  background-color: rgba(0, 0, 0, 0.05);
  cursor: default;
}

/* Rendered HTML content styling */
.rich-text-content {
  line-height: 1.6;
  word-wrap: break-word;
}

.rich-text-content p {
  margin: 0 0 8px 0;
}

.rich-text-content p:last-child {
  margin-bottom: 0;
}

.rich-text-content ul,
.rich-text-content ol {
  margin: 8px 0;
  padding-left: 24px;
}

.rich-text-content li {
  margin: 4px 0;
}

.rich-text-content strong {
  font-weight: 600;
}

.rich-text-content em {
  font-style: italic;
}

.rich-text-content u {
  text-decoration: underline;
}

.rich-text-content mark {
  background-color: #ffeb3b;
  padding: 2px 4px;
  border-radius: 2px;
}

/* Dark mode styles for rich text editor - white icons to match spell check */
body.dark-mode .rich-text-editor-wrapper .ql-toolbar,
.dark-mode .rich-text-editor-wrapper .ql-toolbar {
  background: #35354A;
  border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode .rich-text-editor-wrapper .ql-toolbar button,
body.dark-mode .rich-text-editor-wrapper .ql-toolbar .ql-picker-label,
.dark-mode .rich-text-editor-wrapper .ql-toolbar button,
.dark-mode .rich-text-editor-wrapper .ql-toolbar .ql-picker-label {
  color: rgba(255, 255, 255, 0.87) !important;
}

body.dark-mode .rich-text-editor-wrapper .ql-container,
.dark-mode .rich-text-editor-wrapper .ql-container {
  background: #35354A;
  border-color: rgba(255, 255, 255, 0.12);
  color: #CFD8DC;
}

body.dark-mode .rich-text-editor-wrapper .ql-editor,
.dark-mode .rich-text-editor-wrapper .ql-editor {
  color: #CFD8DC;
}

body.dark-mode .rich-text-editor-wrapper .ql-editor.ql-blank::before,
.dark-mode .rich-text-editor-wrapper .ql-editor.ql-blank::before {
  color: rgba(255, 255, 255, 0.38);
}

/* Override Quill .ql-snow .ql-stroke (#444) - force white in dark mode */
body.dark-mode .rich-text-editor-wrapper .ql-toolbar .ql-stroke,
body.dark-mode .rich-text-editor-wrapper .ql-toolbar .ql-stroke-miter,
.dark-mode .rich-text-editor-wrapper .ql-toolbar .ql-stroke,
.dark-mode .rich-text-editor-wrapper .ql-toolbar .ql-stroke-miter {
  stroke: rgba(255, 255, 255, 0.87) !important;
}

body.dark-mode .rich-text-editor-wrapper .ql-toolbar .ql-fill,
body.dark-mode .rich-text-editor-wrapper .ql-toolbar .ql-stroke.ql-fill,
.dark-mode .rich-text-editor-wrapper .ql-toolbar .ql-fill,
.dark-mode .rich-text-editor-wrapper .ql-toolbar .ql-stroke.ql-fill {
  fill: rgba(255, 255, 255, 0.87) !important;
}

body.dark-mode .rich-text-editor-wrapper .ql-toolbar button:hover,
body.dark-mode .rich-text-editor-wrapper .ql-toolbar button.ql-active,
.dark-mode .rich-text-editor-wrapper .ql-toolbar button:hover,
.dark-mode .rich-text-editor-wrapper .ql-toolbar button.ql-active {
  color: #26A69A !important;
}

body.dark-mode .rich-text-editor-wrapper .ql-toolbar button:hover .ql-stroke,
body.dark-mode .rich-text-editor-wrapper .ql-toolbar button.ql-active .ql-stroke,
body.dark-mode .rich-text-editor-wrapper .ql-toolbar button:hover .ql-stroke-miter,
body.dark-mode .rich-text-editor-wrapper .ql-toolbar button.ql-active .ql-stroke-miter,
.dark-mode .rich-text-editor-wrapper .ql-toolbar button:hover .ql-stroke,
.dark-mode .rich-text-editor-wrapper .ql-toolbar button.ql-active .ql-stroke {
  stroke: #26A69A !important;
}

body.dark-mode .rich-text-editor-wrapper .ql-toolbar button:hover .ql-fill,
body.dark-mode .rich-text-editor-wrapper .ql-toolbar button.ql-active .ql-fill,
body.dark-mode .rich-text-editor-wrapper .ql-toolbar button:hover .ql-stroke.ql-fill,
body.dark-mode .rich-text-editor-wrapper .ql-toolbar button.ql-active .ql-stroke.ql-fill,
.dark-mode .rich-text-editor-wrapper .ql-toolbar button:hover .ql-fill,
.dark-mode .rich-text-editor-wrapper .ql-toolbar button.ql-active .ql-fill {
  fill: #26A69A !important;
}

body.dark-mode .rich-text-editor-wrapper .ql-container.ql-disabled,
.dark-mode .rich-text-editor-wrapper .ql-container.ql-disabled {
  background-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .rich-text-content,
.dark-mode .rich-text-content {
  color: #CFD8DC;
}

/* Pin Form Actions */
.pin-form-actions {
  padding: 0 16px !;
  display: flex !;
  gap: 8px !;
  flex-wrap: wrap !;
  border-top: 1px solid #e0e0e0 !;
  background: #fafafa !;
  position: sticky !;
  bottom: 0 !;
  z-index: 1 !;
  min-height: 48px !important;
  max-height: 48px !important;
  height: 48px !important;
  flex-shrink: 0 !;
  align-items: center !important;
  justify-content: space-between !important;
}

.pin-form-actions .v-btn {
  transition: all 0.2s ease !;
  width: 80px !;
  height: 36px !;
  padding: 0 !;
  border-radius: 4px !;
  display: flex !;
  align-items: center !;
  justify-content: center !;
  font-size: 14px !;
}

.pin-form-actions .pin-meta-footer {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  line-height: 1.2 !important;
}

.pin-form-actions .v-btn:hover {
  transform: scale(1.05) !;
  opacity: 0.9 !;
}

/* Image Grid - Masonry Layout */
.image-grid {
  column-count: 3 !;
  column-gap: 8px !;
  overflow-y: auto !;
  margin-top: 12px !;
  width: 100% !;
  box-sizing: border-box !;
}

/* Fullscreen mode: 4 columns */
.v-dialog--fullscreen .image-grid {
  column-count: 4 !;
  column-gap: 12px !;
}

.image-container {
  position: relative !;
  width: 100% !;
  box-shadow: none !;
  border-radius: 4px !;
  overflow: hidden !;
  background: #f0f0f0 !;
  display: block !;
  break-inside: avoid !;
  page-break-inside: avoid !;
  margin-bottom: 8px !;
}

.image-container img {
  width: 100% !;
  height: auto !;
  object-fit: contain !;
  border-radius: 4px !;
  display: block !;
}

.image-caption-removed {
  width: 100% !;
  padding: 4px 0px !;
  font-size: 12px !;
  color: #1976d2 !;
  text-align: center !;
}

.image-caption-removed input {
  width: 100% !;
  border: 0px solid #e0e0e0 !;
  border-radius: 4px !;
  padding: 4px !;
  font-size: 12px !;
  box-sizing: border-box !;
}

.image-caption-removed input:focus {
  outline: none !;
  border-color: #1565c0 !;
}

/* Image actions buttons styling */
.image-actions {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  display: flex !important;
  gap: 4px !important;
  z-index: 100 !important;
  pointer-events: auto !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
}

.image-container:hover .image-actions {
  opacity: 1 !important;
}

.image-actions button {
  z-index: 101 !important;
  pointer-events: auto !important;
  position: relative !important;
  padding: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  border-radius: 4px !important;
  background: #f5f5f5 !important;
  border: 1px solid #ddd !important;
  color: #333 !important;
}

.image-actions button:hover {
  background: #e8e8e8 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.image-actions button .mdi {
  color: #333 !important;
}

/* Custom Carousel Styles */
.image-carousel-dialog .carousel-card {
  display: flex !;
  flex-direction: column !;
  height: 100vh !;
  background: #ffffff !;
}

.image-carousel-dialog 
.carousel-header {
  font-size: 20px !;
  font-weight: 500 !;
  padding: 16px 24px !;
  background: #1976d2 !;
  color: white !;
  flex-shrink: 0 !;
}


.dark-mode .image-carousel-dialog 
.carousel-header {
  font-size: 20px !;
  font-weight: 500 !;
  padding: 16px 24px !;
  background: #1976d2 !;
  color: white !;
  flex-shrink: 0 !;
}


.image-carousel-dialog .carousel-content {
  flex-grow: 1 !;
  padding: 16px !;
  overflow: hidden !;
  background: #ffffff !;
}

body.dark-mode .image-carousel-dialog .thumbnail-bar {
  background: #2f2f3f !important;
}

.custom-carousel {
  position: relative !;
  width: 100% !;
  height: 100vh !;
  overflow: hidden !;
}

.carousel-track {
  display: flex !;
  transition: transform 0.3s ease !;
  width: 100% !;
  height: 100% !;
}


.carousel-item {
  flex: 0 0 100% !;
  width: 100vw !;
  height: 100vh !;
  display: flex !;
  flex-direction: column !;
  align-items: center !;
  justify-content: center !;
  padding: 0 !;
  box-sizing: border-box !;
  background: #000000 !;
}


.dark-mode 
.carousel-item {
  flex: 0 0 100% !;
  width: 100vw !;
  height: 100vh !;
  display: flex !;
  flex-direction: column !;
  align-items: center !;
  justify-content: center !;
  padding: 0 !;
  box-sizing: border-box !;
  background: #000000 !;
}




.carousel-item img {
  max-width: 100% !;
  max-height: 100% !;
  width: auto !;
  height: auto !;
  object-fit: contain !;
  display: block !;
  margin: auto !;
  background: white !;
}



.dark-mode 

.carousel-item img {
  max-width: 100% !;
  max-height: 100% !;
  width: auto !;
  height: auto !;
  object-fit: contain !;
  display: block !;
  margin: auto !;
  background: white !;
}



.carousel-caption {
  width: 100% !;
  padding: 8px !;
  text-align: center !;
}

.carousel-caption input {
  width: 100% !;
  border: 1px solid #e0e0e0 !;
  border-radius: 4px !;
  padding: 4px !;
  font-size: 14px !;
  box-sizing: border-box !;
}

.dark-mode .carousel-caption input {
  border-color: #455A64 !;
  background: #35354A !;
  color: #CFD8DC !;
}

.carousel-caption input:focus {
  outline: none !;
  border-color: #1565c0 !;
}

.dark-mode .carousel-caption input:focus {
  border-color: #26A69A !;
}

.carousel-nav {
  position: absolute !;
  top: 50% !;
  transform: translateY(-50%) !;
  background: rgba(0, 0, 0, 0.5) !;
  color: white !;
  border: none !;
  border-radius: 50% !;
  width: 40px !;
  height: 40px !;
  display: flex !;
  align-items: center !;
  justify-content: center !;
  cursor: pointer !;
  transition: background 0.2s ease !;
}

.carousel-nav:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.7) !;
}

.carousel-nav:disabled {
  opacity: 0.5 !;
  cursor: not-allowed !;
}

.carousel-nav.prev {
  left: 8px !;
}

.carousel-nav.next {
  right: 8px !;
}

.no-images {
  text-align: center !;
  color: #666 !;
  font-style: italic !;
  font-size: 14px !;
  margin-top: 16px !;
}

.dark-mode .no-images {
  color: #CFD8DC !;
}

/* Severity Calculator */
.severity-calculator {
  display: flex !;
  flex-direction: column !;
  gap: 12px !;
  padding-top: 12px !;
}

.severity-calculator .input-section {
  display: flex !;
  justify-content: flex-start !;
  gap: 10px !;
  flex-wrap: wrap !;
  margin-top: 8px !;
}

.severity-calculator .input-section .unit-toggle-wrapper {
  display: flex !;
  align-items: center !;
  gap: 8px !;
  padding: 0 8px 0 0 !;
  flex: 0 0 auto !;
}

.severity-calculator .input-section .unit-toggle .unit-toggle-btn {
  min-width: 96px !;
  background-color: #e0e0e0 !;
  color: #424242 !;
  text-transform: none !;
  font-weight: 500 !;
}

.severity-calculator .input-section .unit-toggle .unit-toggle-btn.v-btn--active {
  background-color: #0288d1 !;
  color: #ffffff !;
}

.severity-calculator .input-section .unit-toggle .unit-toggle-btn:not(.v-btn--active) {
  box-shadow: none !;
}


.severity-calculator .severity-summary-row {
  display: grid !;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr) !;
  align-items: baseline !;
  column-gap: 16px !;
  row-gap: 8px !;
  margin: 16px 0 !;
}

.severity-calculator .severity-summary-row .result-section {
  display: flex !;
  flex-wrap: wrap !;
  align-items: baseline !;
  gap: 16px !;
}

.severity-calculator .severity-summary-row .impact-speed-text {
  font-size: 14px !;
  color: #424242 !;
}

.severity-disclaimer-icon-btn {
  margin-left: 4px !important;
  flex-shrink: 0;
}

.severity-calculator .severity-definitions-header {
  display: flex !;
  align-items: baseline !;
  gap: 6px !;
  margin: 0 !;
  flex: 0 0 auto !;
}

.severity-calculator .severity-definitions-header h3 {
  margin: 0 !;
  font-size: 16px !;
  font-weight: 500 !;
  color: #1976d2 !;
  display: flex !;
  align-items: center !;
  gap: 6px !;
}

.severity-calculator .severity-definitions-header .v-icon {
  color: #1976d2 !;
}

.severity-calculator .chart-and-definitions-container {
  display: flex !;
  gap: 20px !;
  align-items: stretch !;
  flex-wrap: wrap !;
}

.severity-calculator .chart-section {
  flex: 1 1 360px !;
  min-width: 0 !;
  display: flex !;
}

.severity-calculator .chart-section .chart-container {
  position: relative !;
  flex: 1 !;
  width: 100% !;
  min-height: 250px !;
  display: flex !;
}

.severity-calculator .chart-section .chart-container canvas {
  width: 100% !important;
  height: 100% !important;
}

.severity-calculator .severity-definitions-section {
  flex: 1 1 320px !;
  min-width: 300px !;
  display: flex !;
  flex-direction: column !;
}

.severity-calculator .severity-definitions {
  flex: 1 !;
  display: flex !;
  flex-direction: column !;
  gap: 12px !;
}

.severity-calculator .severity-definition-item {
  border-radius: 0 !important;
}

.v-tabs-items .v-window-item:nth-child(1) .severity-calculator .input-section {
  margin-top: 8px !;
}

.severity-calculator .input-section .v-text-field {
  width: 100px !;
  margin-bottom: 0 !;
}

.severity-calculator .input-section .v-btn {
  transition: all 0.2s ease !;
  width: 80px !;
  height: 36px !;
  padding: 0 !;
  border-radius: 4px !;
  display: flex !;
  align-items: center !;
  justify-content: center !;
  margin-bottom: 0 !;
}

.severity-calculator .input-section .v-btn:hover {
  transform: scale(1.05) !;
  opacity: 0.9 !;
}

.severity-calculator .result-section {
  text-align: left !;
}

.severity-calculator .result-section p {
  margin: 0 !;
  font-size: 14px !;
  color: #424242 !;
}

.severity-calculator .result-section #severity-result {
  font-weight: bold !;
  color: #1565c0 !;
}

/* Leaflet Layers */
.leaflet-overlay-pane {
  z-index: 400 !;
}

.leaflet-marker-pane {
  z-index: 600 !;
}

/* PDO Register Table */
.pdo-register-table {
  width: 100%;
  border-collapse: collapse;
}

.pdo-register-table th,
.pdo-register-table td {
  padding: 8px 16px;
  border-bottom: 1px solid #e0e0e0;
  text-align: left;
  vertical-align: top;
  font-size: 0.875rem;
}

.pdo-register-table th {
  background: #f5f5f5;
  font-weight: 500;
  border-bottom: 2px solid #e0e0e0;
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 0.8125rem;
}

.pdo-register-table tbody tr:hover {
  background: #e8ecef;
}

.pdo-register-table tbody tr.pdo-row-selected {
  background: #e3f2fd;
}

.pdo-checkbox-column {
  width: 48px;
  padding: 8px 4px !important;
  text-align: center;
}

.pdo-expand-column {
  width: 48px;
  padding: 8px 4px !important;
  text-align: center;
}

.pdo-name-column {
  min-width: 120px;
}

.pdo-actions-column {
  width: 48px;
  padding: 8px 4px !important;
  text-align: center;
}

.pdo-overdue-date {
  color: #f44336 !important;
  font-weight: 600;
}

.pdo-register-table-container {
  overflow-y: auto;
  /* Height is controlled by flexbox parent */
}

.pdo-expanded-row {
  background: rgba(0, 0, 0, 0.02);
}

.pdo-expanded-row .pdo-register-expanded-cell {
  padding: 0 !important;
  border-bottom: none;
}

.pdo-register-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgb(250, 250, 250);
  display: flex;
  flex-direction: column;
  z-index: 8000;
  padding: 0;
}

/* Remove box shadow from all cards in PDO register - comprehensive override */
.pdo-register-fullscreen .v-card,
.pdo-register-fullscreen .v-data-table,
.pdo-register-fullscreen .v-data-table__wrapper,
.pdo-register-content .v-card,
.pdo-register-content .v-data-table,
.pdo-register-content .v-data-table__wrapper,
.pdo-register-fullscreen .v-card *,
.pdo-register-content .v-card *,
.pdo-register-table .v-card,
.pdo-register-table .v-data-table,
.pdo-register-table .v-data-table__wrapper,
/* Target v-data-table's internal card wrapper */
.pdo-register-table.v-data-table > .v-card,
.pdo-register-table.v-data-table .v-card,
.pdo-register-fullscreen .v-data-table > .v-card,
.pdo-register-content .v-data-table > .v-card,
/* Target all possible card elements within PDO register */
.pdo-register-fullscreen .v-card,
.pdo-register-fullscreen .v-card *,
.pdo-register-fullscreen * .v-card,
.pdo-register-content .v-card,
.pdo-register-content .v-card *,
.pdo-register-content * .v-card,
/* Target v-data-table card wrapper specifically */
.pdo-register-table.v-data-table .v-card,
.pdo-register-table.v-data-table .v-card.v-sheet,
.pdo-register-fullscreen .v-data-table .v-card,
.pdo-register-fullscreen .v-data-table .v-card.v-sheet {
  box-shadow: none !important;
}

/* Force remove elevation from v-data-table card */
.pdo-register-table.v-data-table .v-card[class*="elevation"],
.pdo-register-fullscreen .v-data-table .v-card[class*="elevation"] {
  box-shadow: none !important;
}

.pdo-register-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  min-height: 48px !important;
  max-height: 48px !important;
  height: 48px !important;
  background: #1976d2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.pdo-toolbar-btn {
  min-width: 180px;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: inset 0 0 0 1px rgba(25, 118, 210, 0.4);
  transition: background 0.2s ease;
  font-size: 14px !important;
}

.pdo-toolbar-btn:hover {
  background: #e8f1ff;
}

.pdo-toolbar-btn.danger {
  color: #b71c1c !important;
  box-shadow: inset 0 0 0 1px rgba(183, 28, 28, 0.5);
}

.pdo-register-controls {
  display: flex;
  gap: 20px;
  align-items: center;
}

.pdo-register-controls .v-btn {
  font-size: 14px !important;
}

.pdo-register-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  margin: 0;
  border-radius: 0;
  box-shadow: none !important;
  overflow: hidden;
}

.pdo-register-fade-enter-active,
.pdo-register-fade-leave-active {
  transition: opacity 0.25s ease;
}

.pdo-register-fade-enter,
.pdo-register-fade-leave-to {
  opacity: 0;
}
/* Remove box-shadow from dashboard expandable row */
.v-data-table > .v-data-table__wrapper tbody tr.v-data-table__expanded__content {
  box-shadow: none !important;
}

.pdo-register-expanded-cell {
  padding: 0 !important;
  background-color: rgba(0, 0, 0, 0.02);
}

.pdo-register-expand-card {
  background: #F5F5F5;
  border: none;
  border-radius: 0;
  padding: 20px 24px;
  box-shadow: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  row-gap: 20px;
}

/* Severity Disclaimer Modal Styles */
.custom-modal.severity-disclaimer-modal {
  max-width: 60vw !important;
  max-height: 90vh;
  border-radius: 0 !important;
}

.severity-disclaimer-modal .custom-modal-header-warning {
  background: linear-gradient(135deg, #ff9800, #f57c00);
}

.disclaimer-content {
  line-height: 1.6;
}

.disclaimer-content p {
  margin-bottom: 16px;
  color: #424242;
}

.disclaimer-content strong {
  color: #d32f2f;
}

body.dark-mode .severity-disclaimer-modal .disclaimer-content,
body.dark-mode .severity-disclaimer-modal .disclaimer-content p,
body.dark-mode .severity-disclaimer-modal .disclaimer-content strong {
  color: #e0e0e0 !important;
}

body.dark-mode .severity-disclaimer-modal .disclaimer-content strong {
  color: #ff8a80 !important;
}

body.dark-mode .severity-disclaimer-modal .disclaimer-content div[style*="background"] {
  background: rgba(255, 152, 0, 0.2) !important;
  border-color: rgba(255, 152, 0, 0.5) !important;
  color: #e0e0e0 !important;
}

.pdo-expand-row {
  display: contents;
}

.pdo-expand-row:last-child {
  margin-bottom: 0;
}

.pdo-expand-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.pdo-expand-field .label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  color: #616161;
  margin-bottom: 6px;
  line-height: 1.4;
}

.pdo-expand-field .value {
  font-size: 14px;
  font-weight: 500;
  color: #212121;
  line-height: 1.5;
  word-wrap: break-word;
  min-height: 20px;
}

.pdo-expand-field .value:empty::before {
  content: '—';
  color: #9e9e9e;
  font-style: italic;
}

.pdo-expand-notes {
  margin-top: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  grid-column: 1 / -1;
}

.pdo-expand-notes .label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  color: #616161;
  margin-bottom: 8px;
  line-height: 1.4;
}

.pdo-expand-notes .value {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: #424242;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.pdo-expand-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.pdo-expand-chips .v-chip {
  font-size: 11px;
  border-radius: 12px;
  height: 24px;
  margin: 0;
}

.rounded-chip {
  border-radius: 12px !important;
}

/* Filter Section */
.filter-section {
  padding: 16px;
  background: #fafafa;
  border-bottom: 1px solid #e0e0e0;
}

/* Level Settings Modal */
.level-settings-modal {
  max-height: 90vh !;
  display: flex !;
  flex-direction: column !;
  overflow: hidden !;
}

.level-settings-scrollable {
  overflow-y: auto !;
  max-height: calc(90vh - 112px) !;
}

.level-settings-modal .v-card {
  display: flex !important;
  flex-direction: column !important;
  max-height: 90vh !important;
  height: auto !important;
}

.level-settings-modal .v-card-title {
  flex-shrink: 0 !;
  min-height: 56px !;
  padding: 16px 24px !;
}

.level-settings-modal .v-card-text {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: auto !important;
  max-height: calc(90vh - 140px) !;
  padding: 16px 24px !;
}

.level-settings-modal .v-card-actions {
  flex-shrink: 0 !;
  border-top: 1px solid #e0e0e0 !;
  background: #fafafa !;
  padding: 12px 24px !;
}

/* Drop Zone */
.drop-zone {
  border: 2px dashed #1565c0;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  background: #f5f5f5;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 12px 0;
  position: relative;
  z-index: 10001;
  pointer-events: auto;
}

.drop-zone.drag-over {
  background: #e3f2fd;
  border-color: #0288d1;
}

.drop-zone p {
  margin: 0;
  color: #424242;
  font-size: 14px !;
}

.drop-zone input {
  display: none;
}

/* Upload Modal */
.upload-modal-content {
  padding: 16px;
  max-height: calc(100vh - 112px);
  overflow-y: auto;
  position: relative;
  z-index: 10001;
  pointer-events: auto;
}

.upload-modal-actions {
  border-top: 1px solid #e0e0e0;
  padding: 12px 16px;
  background: #fafafa;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  position: relative;
  z-index: 10001;
  pointer-events: auto;
}

.upload-status {
  margin-top: 12px;
  font-size: 14px;
}

/* Overlay */
.v-overlay--active {
  z-index: 9998 !;
  pointer-events: none !;
}

.v-overlay__scrim {
  opacity: 0.5 !;
  background-color: #000 !;
  pointer-events: none !;
}

/* File List */
.file-list {
  margin-top: 12px;
  padding: 0;
  list-style: none;
}

.file-list li {
  padding: 8px;
  border-bottom: 1px solid #e0e0e0;
  font-size: 14px;
  color: #424242;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.file-list li:last-child {
  border-bottom: none;
}

/* Dark Mode Styles */
.dark-mode .level-settings-modal {
  background: #2f2f3f !important;
}

.dark-mode .level-settings-scrollable {
  background: #2f2f3f !important;
}

.dark-mode .level-settings-modal .v-card-actions {
  background: #3a3a3a !;
  border-top: 1px solid #616161 !;
}

.dark-mode .drop-zone {
  background: #35354A !;
  border-color: #26A69A !;
  color: #CFD8DC !;
}

.dark-mode .drop-zone.drag-over {
  background: #3F3F55 !;
  border-color: #4DB6AC !;
}

.dark-mode .pdo-register-table th {
  background: #2f2f3f !important;
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.dark-mode .pdo-register-table tbody tr:hover {
  background: #3a3a4a !important;
}

.dark-mode .pdo-register-table tbody tr.pdo-row-selected {
  background: #1e3a5f;
}

.dark-mode .pdo-overdue-date {
  color: #ff5252 !important;
}

.dark-mode .pdo-register-expanded-cell {
  background-color: #2f2f3f !important;
}

.dark-mode .pdo-expanded-row {
  background: #2f2f3f !important;
}

.dark-mode .pdo-register-expand-card {
  background: #2f2f3f !important;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.dark-mode .pdo-expand-field .label {
  color: rgba(255, 255, 255, 0.65);
}

.dark-mode .pdo-expand-field .value {
  color: rgba(255, 255, 255, 0.9);
}

.dark-mode .pdo-expand-field .value:empty::before {
  color: rgba(255, 255, 255, 0.4);
}

.dark-mode .pdo-expand-notes {
  border-top-color: rgba(255, 255, 255, 0.15);
}

.dark-mode .pdo-expand-notes .label {
  color: rgba(255, 255, 255, 0.65);
}

.dark-mode .pdo-expand-notes .value {
  color: rgba(255, 255, 255, 0.85);
}

.dark-mode .pdo-expand-chips .v-chip {
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
}

.dark-mode .pdo-register-fullscreen {
  background: #2f2f3f !important;
}

.dark-mode .pdo-register-toolbar {
  background: #1976d2 !important;
}

.dark-mode .pdo-register-content {
  background: #2f2f3f !important;
  color: #e0e0e0;
  box-shadow: 0 35px 65px rgba(0, 0, 0, 0.65);
  border-radius: 0;
}

.dark-mode .upload-modal-content {
  background: #2A2A3C !;
  color: #CFD8DC !;
}

.dark-mode .upload-modal-actions {
  background: #35354A !;
  border-top: 1px solid #455A64 !;
}

.dark-mode .file-list li {
  border-bottom: 1px solid #455A64 !;
  color: #CFD8DC !;
}

.dark-mode .v-overlay__scrim {
  background-color: #000000 !;
  opacity: 0.6 !;
}

.dark-mode .v-dialog {
  background: transparent !important;
}

.dark-mode .v-dialog .v-card {
  background: #2A2A3C;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
}

/* Remove box shadow from delete image dialog in dark mode */
.dark-mode .v-dialog.delete-image-dialog .v-card,
.dark-mode .delete-image-dialog .v-card,
.dark-mode .delete-image-dialog-card {
  box-shadow: none !important;
}

.dark-mode .pin-form-card {
  background: #2A2A3C !;
}

.dark-mode .pin-form-content {
  color: #CFD8DC !;
}

body.dark-mode .details-field-label,
.dark-mode .details-field-label {
  color: rgba(255, 255, 255, 0.7);
}

.dark-mode .pin-form-content .v-text-field__slot label,
.dark-mode .pin-form-content .v-select__slot label {
  color: #CFD8DC !;
}

.dark-mode .pin-form-content .v-text-field input,
.dark-mode .pin-form-content .v-select .v-select__selection {
  color: #CFD8DC !;
}

.dark-mode .pin-form-content .v-text-field--disabled input {
  color: #CFD8DC !;
}

.dark-mode .auto-resize-textarea {
  background: #35354A !;
  color: #CFD8DC !;
  border: none !; /* Remove border in dark mode */
  padding: 8px 8px 8px 0 !;
}

.dark-mode .auto-resize-textarea:focus {
  border-color: #26A69A !;
}

.dark-mode .pin-form-actions {
  background: #35354A !;
  border-top: 1px solid #455A64 !;
}

.dark-mode .pin-form-actions .v-btn[color="#1565c0"],
.dark-mode .pin-form-actions .v-btn[color="#0288d1"] {
  background: #26A69A !;
  color: #FFFFFF !;
}

.dark-mode .v-tabs {
  background-color: #35354A !;
}

.dark-mode .v-tab {
  color: #CFD8DC !;
}

.dark-mode .v-tab--active {
  color: #26A69A !;
}

.dark-mode .v-tabs-items {
  background: #2A2A3C !;
}

.dark-mode .severity-calculator .result-section p {
  color: #CFD8DC !;
}

.dark-mode .severity-calculator .result-section #severity-result {
  color: #26A69A !;
}

.dark-mode .severity-calculator .severity-summary-row .impact-speed-text {
  color: #CFD8DC !;
}

.dark-mode .severity-calculator .severity-definitions-header h3,
.dark-mode .severity-calculator .severity-definitions-header .v-icon {
  color: #90CAF9 !;
}

.dark-mode .severity-calculator .input-section .unit-toggle .unit-toggle-btn {
  background-color: #2f2f3f !;
  color: #f0f0f0 !;
}

.dark-mode .severity-calculator .input-section .unit-toggle .unit-toggle-btn.v-btn--active {
  background-color: #0288d1 !;
  color: #ffffff !;
}

.dark-mode .severity-calculator .input-section .v-text-field__slot label,
.dark-mode .severity-calculator .input-section .v-text-field input {
  color: #CFD8DC !;
}

.dark-mode .severity-calculator .input-section .v-text-field .v-input__slot {
  background: #35354A !;
  border-color: #455A64 !;
}

.dark-mode .severity-calculator .input-section .v-text-field .v-input__slot:hover,
.dark-mode .severity-calculator .input-section .v-text-field .v-input__slot:focus-within {
  border-color: #26A69A !;
}

.dark-mode .severity-calculator .input-section .v-btn {
  background: #26A69A !;
  color: #FFFFFF !;
}

.dark-mode .severity-calculator .input-section .v-btn:hover {
  background: #4DB6AC !;
}

/* Loading Overlay for Severity Calculator */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dark-mode .loading-overlay {
  background: rgba(42, 42, 60, 0.8);
}

.loading-overlay p {
  font-size: 14px;
  color: #424242;
}

.dark-mode .loading-overlay p {
  color: #CFD8DC;
}

/* Media Queries for Responsiveness */
@media (max-width: 600px) {
  .v-dialog {
    width: 95vw !;
    min-width: 280px !;
    height: 85vh !;
    min-height: 350px !;
  }

  #pinFormHeader {
    font-size: 16px !;
    padding: 0 12px !;
    min-height: 48px !important;
    max-height: 48px !important;
    height: 48px !important;
    line-height: 48px !important;
  }

  .v-tab {
    font-size: 12px !;
    padding: 0 8px !;
  }

  .pin-form-content {
    padding: 12px !;
  }

  .pin-form-actions {
    padding: 0 12px !;
    gap: 6px !;
    min-height: 48px !important;
    max-height: 48px !important;
    height: 48px !important;
    align-items: center !important;
  }

  .pin-form-actions .v-btn {
    width: 70px !;
    height: 32px !;
    font-size: 12px !;
  }

  .image-grid {
    column-count: 2 !;
    column-gap: 6px !;
  }

  .image-container img {
    height: auto !;
  }

  .severity-calculator .input-section {
    gap: 8px !;
  }

  .severity-calculator .input-section .v-text-field {
    width: 80px !;
  }

  .severity-calculator .chart-container {
    height: 200px !;
  }

  

.carousel-item img {
  max-width: 100% !;
  max-height: 100% !;
  width: auto !;
  height: auto !;
  object-fit: contain !;
  display: block !;
  margin: auto !;
  background: white !
}


}

@media (max-width: 400px) {
  .v-dialog {
    width: 98vw !;
    min-width: 260px !;
    height: 90vh !;
    min-height: 300px !;
  }

  .pin-form-content {
    padding: 10px !;
  }

  .pin-form-actions .v-btn {
    width: 60px !;
    height: 30px !;
    font-size: 11px !;
  }

  .image-grid {
  column-count: 1 !;
  column-gap: 8px !;
  overflow-y: auto !;
  margin-top: 12px !;
  width: 100% !;
  box-sizing: border-box !;
}

.v-dialog--fullscreen .image-grid {
  grid-template-columns: repeat(4, 1fr) !; /* 4 per row in fullscreen */
}

.image-container {
  position: relative !;
  width: 100% !;
  overflow: hidden !;
  border-radius: 4px !;
  background: #f0f0f0 !;
}

.image-container img {
  width: 100% !;
  height: auto !;
  object-fit: contain !;
  border-radius: 4px !;
  display: block !;
}

  .severity-calculator .input-section .v-text-field {
    width: 70px !;
  }

.carousel-item img {
  width: 100vw !important;
  height: 100vh !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  background: white !important;
}

  /* Align date field in normal mode and remove padding in fullscreen */
.date-col {
  padding-left: 0px !;
}
.v-dialog--fullscreen .date-col {
  padding-left: 0px !;
}
}
/* Tooltip styling for PDO IDs */
.pdo-label-tooltip {
  background: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  opacity: 0.95;
  transition: opacity 0.2s ease-in-out;
}
.v-dialog.upload-image-modal {
  max-height: 100vh !important;
  height: 100vh !important;
}

.v-dialog.upload-image-modal .v-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.v-dialog.upload-image-modal .v-card-title {
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  padding: 12px 16px !important;
}

.upload-modal-content {
  flex-grow: 1 !important;
  overflow: hidden !important;
  max-height: none !important;
}

/* Allow scrolling in the thumbnail container */
.upload-modal-content .flex-grow-1.overflow-auto {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: calc(100vh - 200px) !important; /* Leave space for header/footer */
}

.upload-image-modal .image-drop-zone {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed #1976d2;
  border-radius: 12px;
  background: #f5f9ff;
  transition: border-color 0.2s ease, background 0.2s ease;
  cursor: pointer;
}

.upload-image-modal .image-drop-zone.drag-over {
  border-color: #0d47a1;
  background: #e8f1ff;
}

.upload-image-modal .image-preview-card {
  width: 120px;
  height: 120px;
  position: relative;
}

.upload-modal-actions {
  margin-top: auto !;
  border-top: 1px solid #e0e0e0;
  background: #fafafa;
}


/* === Custom Carousel Header === */
.image-carousel-dialog .carousel-header {
  font-size: 20px !;
  font-weight: 500 !;
  padding: 12px 16px !;
  background: linear-gradient(135deg, #1565c0 0%, #1976d2 100%) !;
  color: white !;
  display: flex !;
  justify-content: space-between !;
  align-items: center !;
  flex-shrink: 0 !;
}

/* === Fullscreen Carousel Image Display === */
.carousel-item {
  flex: 0 0 100% !;
  width: 100vw !;
  height: 100vh !;
  padding: 0 !;
  margin: 0 !;
  display: block !;
  overflow: hidden !;
  background: #000 !;
}


.carousel-item img {
  max-width: 100% !;
  max-height: 100% !;
  width: auto !;
  height: auto !;
  object-fit: contain !;
  display: block !;
  margin: auto !;
  background: white !;
}


/* === Caption Styling === */
.image-carousel-dialog .image-caption-removed {
  font-size: 12px !;
  padding: 2px 8px !;
  color: #ccc !;
  background: transparent !;
  text-align: center !;
  margin-top: 8px !;
}

/* === Thumbnail Bar Styling === */
.image-carousel-dialog .thumbnail-bar {
  display: flex !;
  justify-content: center !;
  gap: 8px !;
  padding: 8px 0 !;
  background: #f5f5f5 !;
  border-top: 1px solid #ddd !;
  flex-wrap: wrap !;
}

.image-carousel-dialog .thumbnail-bar img {
  width: 64px !;
  height: 64px !;
  object-fit: cover !;
  border: 2px solid transparent !;
  border-radius: 4px !;
  cursor: pointer !;
  transition: border 0.2s ease;
}

.image-carousel-dialog .thumbnail-bar img.active {
  border: 2px solid #1976d2 !;
}


.carousel-item img {
  object-fit: contain !;
  width: 100% !;
  height: 100% !;
  background: transparent !;
}

.carousel-item {
  width: 100vw !;
  height: 100vh !;
  background: #000 !;
  display: flex !;
  align-items: center !;
  justify-content: center !;
}

.carousel-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  padding: 0 20px;
  z-index: 10;
}

.carousel-controls .v-btn {
  background: rgba(0, 0, 0, 0.5) !;
  color: white !;
}


.image-carousel-dialog .image-caption-removed {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  text-align: center;
  padding: 8px 12px;
  font-size: 14px;
  z-index: 5;
  box-sizing: border-box;
  max-height: 80px;
  overflow: auto;
}

.carousel-controls {
  pointer-events: auto;
}

.carousel-controls .v-btn {
  font-size: 24px !;
  width: 48px !;
  height: 48px !;
  border-radius: 50% !;
  display: flex !;
  align-items: center !;
  justify-content: center !;
}


.carousel-item {
  background: #f0f0f0 !;
}

.carousel-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  padding: 0 20px;
  z-index: 1000;
  pointer-events: none;
}

.carousel-controls .v-btn {
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.5) !;
  color: white !;
  width: 48px !;
  height: 48px !;
  border-radius: 50% !;
  display: flex !;
  align-items: center !;
  justify-content: center !;
  font-size: 24px !;
}


.custom-carousel {
  flex-grow: 1 !;
  display: flex !;
  align-items: center !;
  justify-content: center !;
  background: #f0f0f0 !;
  position: relative !;
}

.carousel-item {
  flex: 0 0 100% !;
  display: flex !;
  flex-direction: column !;
  align-items: center !;
  justify-content: center !;
  background: transparent !;
  height: 100vh !;
  width: 100vw !;
}

.carousel-item img {
  max-width: 100% !;
  max-height: 100% !;
  object-fit: contain !;
  background: transparent !;
}

.image-caption-removed {
  position: absolute !;
  bottom: 0 !;
  left: 0 !;
  right: 0 !;
  background: rgba(0, 0, 0, 0.6) !;
  color: #fff !;
  padding: 8px 12px !;
  font-size: 14px !;
  text-align: center !;
  z-index: 1001 !;
}

.carousel-controls {
  position: absolute !;
  top: 50% !;
  left: 0 !;
  right: 0 !;
  display: flex !;
  justify-content: space-between !;
  transform: translateY(-50%) !;
  padding: 0 20px !;
  z-index: 1002 !;
  pointer-events: none !;
}

.carousel-controls .v-btn {
  pointer-events: auto !;
  background: rgba(0, 0, 0, 0.5) !;
  color: white !;
  width: 48px !;
  height: 48px !;
  border-radius: 50% !;
  display: flex !;
  align-items: center !;
  justify-content: center !;
  font-size: 24px !;
}


.custom-carousel {
  flex-grow: 1 !;
  display: flex !;
  align-items: center !;
  justify-content: center !;
  background: #f0f0f0 !;
  position: relative !;
  height: 100%;
  width: 100%;
}

.carousel-item {
  flex: 0 0 100% !;
  display: flex !;
  flex-direction: column !;
  align-items: center !;
  justify-content: center !;
  background: transparent !;
  height: 100vh !;
  width: 100vw !;
}

.carousel-item img {
  max-width: 100% !;
  max-height: 100% !;
  object-fit: contain !;
  background: transparent !;
}

.image-caption-removed {
  position: absolute !;
  bottom: 0 !;
  left: 0 !;
  right: 0 !;
  background: #ffffff !;
  color: #333 !;
  padding: 8px 12px !;
  font-size: 14px !;
  text-align: center !;
  z-index: 1001 !;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
}
.carousel-controls .v-btn {
  pointer-events: auto !;
  background: rgba(255, 255, 255, 0.8) !;
  color: #333 !;
  width: 48px !;
  height: 48px !;
  margin: 0 12px;
  border-radius: 50% !;
  display: flex !;
  align-items: center !;
  justify-content: center !;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.carousel-controls {
  position: absolute !;
  top: 50% !;
  left: 0 !;
  right: 0 !;
  display: flex !;
  justify-content: space-between !;
  transform: translateY(-50%) !;
  padding: 0 12px !;
  z-index: 1003 !;
  pointer-events: none !;
}

.carousel-controls .v-btn {
  pointer-events: auto !;
  background: rgba(255, 255, 255, 0.7) !;
  color: #000 !;
  width: 48px !;
  height: 48px !;
  border-radius: 50% !;
  display: flex !;
  align-items: center !;
  justify-content: center !;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.carousel-item {
  cursor: pointer !;
}
.carousel-controls .v-btn {
  pointer-events: auto !;
  background: rgba(255, 255, 255, 0.8) !;
  color: #000 !;
  width: 48px !;
  height: 48px !;
  border-radius: 50% !;
  display: flex !;
  align-items: center !;
  justify-content: center !;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.snackbar-message {
  display: block;
  text-align: center;
  width: 100%;
}
.level-settings-modal {
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.level-settings-header {
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
  padding: 16px;
  border-bottom: 1px solid #ccc;
}

.level-settings-scrollable {
  max-height: 60vh;
  overflow-y: auto;
  padding: 16px;
}
.image-carousel-dialog.v-dialog--fullscreen {
  padding: 0 !important;
  margin: 0 !important;
  height: 100vh !important;
  width: 100vw !important;
  max-height: 100vh !important;
  max-width: 100vw !important;
  overflow: hidden !important;
}

.image-carousel-dialog.v-dialog--fullscreen .carousel-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  background: white !important;
}
body.dark-mode .image-carousel-dialog .thumbnail-bar {
  background: #2f2f3f !important;
}

/* Image carousel dark mode: dark background instead of white */
body.dark-mode .image-carousel-dialog .carousel-card,
body.dark-mode .image-carousel-dialog.v-dialog--fullscreen .carousel-card {
  background: #2f2f3f !important;
}
body.dark-mode .image-carousel-dialog .carousel-content {
  background: #2f2f3f !important;
}
body.dark-mode .image-carousel-dialog .carousel-main-area,
body.dark-mode .image-carousel-dialog .carousel-track,
body.dark-mode .image-carousel-dialog .carousel-item {
  background: #2f2f3f !important;
}
body.dark-mode .image-carousel-dialog .carousel-item img,
body.dark-mode .image-carousel-dialog.v-dialog--fullscreen img {
  background: #2f2f3f !important;
}

/* Carousel nav buttons (prev/next) – silver in dark mode to contrast with dark background */
body.dark-mode .image-carousel-dialog .carousel-nav-btn.v-btn,
body.dark-mode .image-carousel-dialog .carousel-nav-btn .v-icon,
body.dark-mode .image-carousel-dialog .carousel-nav-btn .v-btn__content {
  color: #CFD8DC !important;
}
body.dark-mode .image-carousel-dialog .carousel-nav-btn.v-btn {
  background: rgba(255, 255, 255, 0.12) !important;
}

.image-carousel-dialog.v-dialog--fullscreen .carousel-header {
  display: none !important;
}

.image-carousel-dialog.v-dialog--fullscreen .carousel-content,
.image-carousel-dialog.v-dialog--fullscreen .custom-carousel,
.image-carousel-dialog.v-dialog--fullscreen .v-window,
.image-carousel-dialog.v-dialog--fullscreen .v-window__container,
.image-carousel-dialog.v-dialog--fullscreen .carousel-item,
.image-carousel-dialog.v-dialog--fullscreen .v-carousel__item,
.image-carousel-dialog.v-dialog--fullscreen .v-responsive,
.image-carousel-dialog.v-dialog--fullscreen .v-responsive__content {
  height: 100% !important;
  width: 100% !important;
  max-height: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.image-carousel-dialog.v-dialog--fullscreen img {
  width: 100vw !important;
  height: 100vh !important;
  object-fit: contain !important;
  background: white !important;
  display: block !important;
}
.v-responsive__content {
  position: relative !important;
}
.carousel-item img {
  width: 100vw !important;
  height: 100vh !important;
  object-fit: contain !important; /* or cover */
  background: #ffffff !important;
}
.carousel-item img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  margin: auto !important;
}

/* Image carousel dark mode: must come AFTER .carousel-item img white rules so all slides get dark background */
body.dark-mode .image-carousel-dialog .carousel-item,
body.dark-mode .image-carousel-dialog.v-dialog--fullscreen .carousel-item,
body.dark-mode .carousel-card .carousel-item {
  background: #2f2f3f !important;
}
body.dark-mode .image-carousel-dialog .carousel-item img,
body.dark-mode .image-carousel-dialog.v-dialog--fullscreen img,
body.dark-mode .carousel-card .carousel-item img {
  background: #2f2f3f !important;
}
.thumbnail-bar {
  width: 80px;
  overflow-y: auto;
  background: #fff;
  padding: 8px;
  z-index: 1001;
  flex-shrink: 0;
}

.carousel-item {
  position: relative;
}

.carousel-caption-overlay {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(0, 0, 0, 0.7) !important;
  color: white !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  text-align: center !important;
  z-index: 10 !important;
  display: block !important;
}

.thumbnail-bar img.active {
  border: 2px solid #1976d2;
  box-shadow: 0 0 5px #1976d2;
}

.carousel-controls {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 3;
  transform: translateY(-50%);
}
.image-carousel-dialog .v-btn[icon] {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  z-index: 4;
}
.image-carousel-dialog .v-btn[icon]:hover {
  background-color: rgba(255, 255, 255, 0.4);
}
/* Dark mode: keep View and Markup Images header bar blue */
body.dark-mode .image-carousel-dialog .v-app-bar,
body.dark-mode .image-carousel-dialog .v-toolbar {
  background-color: #1976d2 !important;
  color: #ffffff !important;
}
body.dark-mode .image-carousel-dialog .v-app-bar .v-toolbar__title,
body.dark-mode .image-carousel-dialog .v-app-bar .v-icon,
body.dark-mode .image-carousel-dialog .v-app-bar .v-btn,
body.dark-mode .image-carousel-dialog .v-app-bar .v-btn *,
body.dark-mode .image-carousel-dialog .v-app-bar .v-chip {
  color: #ffffff !important;
}
/* Ensure markup tools dialog and its inputs are always interactive */
#markup-tools-dialog,
#markup-tools-dialog *,
#markup-tools-dialog input,
#markup-tools-dialog .v-text-field,
#markup-tools-dialog .v-text-field__slot,
#markup-tools-dialog .v-text-field__slot input {
  pointer-events: auto !important;
  z-index: 10005 !important;
}

/* Markup list items: light background in light mode */
#markup-tools-dialog .markup-list-item {
  background: #f5f5f5;
}
/* Dark mode: markup list container and list items – contrasting background for text */
body.dark-mode #markup-tools-dialog .markup-list-item {
  background: #35354a !important;
  background-color: #35354a !important;
  color: #e0e0e0 !important;
}
body.dark-mode #markup-tools-dialog .markup-list-item .text-caption {
  color: #e0e0e0 !important;
}
body.dark-mode #markup-tools-dialog .markup-list-container {
  background: #35354a !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
body.dark-mode #markup-tools-dialog .markup-list-label {
  color: #e0e0e0 !important;
}

/* Markup tools dialog: labels grey in light mode, white in dark mode */
#markup-tools-dialog .markup-tools-label {
  color: #666;
}
body.dark-mode #markup-tools-dialog {
  background-color: #2f2f3f !important;
}
body.dark-mode #markup-tools-dialog .markup-tools-label {
  color: #ffffff !important;
}
body.dark-mode #markup-tools-dialog .v-card__text,
body.dark-mode #markup-tools-dialog .v-card-text {
  color: #ffffff !important;
}
body.dark-mode #markup-tools-dialog .markup-list-item .text-caption {
  color: #ffffff !important;
}

/* Markup tools dialog header title – same size as custom modal titles (e.g. Unsaved Changes) */
#markup-tools-dialog .markup-tools-dialog-title {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: 0.009375em;
}

/* Markup tools Clear All button – red in dark mode (override silver .v-btn) */
body.dark-mode #markup-tools-dialog .markup-tools-clear-all-btn.v-btn,
body.dark-mode #markup-tools-dialog .markup-tools-clear-all-btn .v-icon,
body.dark-mode #markup-tools-dialog .markup-tools-clear-all-btn .v-btn__content {
  color: #f44336 !important;
}
body.dark-mode #markup-tools-dialog .markup-tools-clear-all-btn.v-btn {
  border-color: #f44336 !important;
}
body.dark-mode #markup-tools-dialog .markup-tools-clear-all-btn.v-btn:hover:not(.v-btn--disabled) {
  background-color: rgba(244, 67, 54, 0.08) !important;
  border-color: #f44336 !important;
  color: #f44336 !important;
}

/* Unsaved markup overlay – above markup tools dialog (dialog uses z-index 10020) */
.markup-unsaved-overlay.custom-modal-overlay {
  z-index: 2147483647 !important;
}

/* Text input modal styling - Custom modal, not Vuetify */
.text-input-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10010;
  pointer-events: auto;
}

.text-input-modal-content {
  background: white;
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  min-width: 320px;
  max-width: 400px;
  width: 90%;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  z-index: 10011;
}

.text-input-modal-header {
  background: #1976d2;
  color: white;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 0;
  pointer-events: auto;
}

.text-input-modal-header .v-icon {
  margin-right: 0;
}

.text-input-close-btn {
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.text-input-close-btn:hover {
  opacity: 0.8;
}

.text-input-modal-body {
  padding: 16px;
  pointer-events: auto;
}

.text-input-field {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
  pointer-events: auto !important;
  background: white;
  outline: none;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
  touch-action: manipulation;
  font-family: inherit;
  resize: vertical;
}

.text-input-field:focus {
  border-color: #1976d2;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
  outline: none;
}

.text-input-field:disabled,
.text-input-field[disabled] {
  background: #f5f5f5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.text-input-field-contenteditable {
  width: 100%;
  min-height: 60px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
  pointer-events: auto !important;
  background: white;
  font-family: inherit;
  outline: none;
  overflow-y: auto;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.text-input-field-contenteditable:focus {
  border-color: #1976d2;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
  outline: none;
}

.text-input-field-contenteditable:empty:before {
  content: attr(data-placeholder);
  color: #999;
  pointer-events: none;
}

.text-input-field:focus {
  border-color: #1976d2;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
}

.text-input-modal-footer {
  padding: 8px 16px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  pointer-events: auto;
}

.text-input-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  pointer-events: auto;
}

.text-input-btn-cancel {
  background: transparent;
  color: #666;
}

.text-input-btn-cancel:hover {
  background: #f5f5f5;
}

.text-input-btn-primary {
  background: #1976d2;
  color: white;
}

.text-input-btn-primary:hover:not(:disabled) {
  background: #1565c0;
}

.text-input-btn-primary:disabled {
  background: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Text input modal – dark mode */
body.dark-mode .text-input-modal-content {
  background: #2A2A3C !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
body.dark-mode .text-input-modal-header {
  background: #1976d2 !important;
  color: white !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
body.dark-mode .text-input-close-btn {
  color: white !important;
}
body.dark-mode .text-input-modal-body {
  background: #2A2A3C !important;
  color: #CFD8DC !important;
}
body.dark-mode .text-input-modal-body label {
  color: #CFD8DC !important;
}
body.dark-mode .text-input-field-contenteditable {
  background: rgba(66, 66, 66, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.23) !important;
  color: rgba(255, 255, 255, 0.87) !important;
}
body.dark-mode .text-input-field-contenteditable:focus {
  border-color: #2196f3 !important;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2) !important;
}
body.dark-mode .text-input-field-contenteditable:empty:before {
  color: rgba(255, 255, 255, 0.38) !important;
}
body.dark-mode .text-input-modal-footer {
  background: #2A2A3C !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
body.dark-mode .text-input-btn-cancel {
  color: #CFD8DC !important;
}
body.dark-mode .text-input-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .text-input-btn-primary {
  background: #1976d2 !important;
  color: white !important;
}
body.dark-mode .text-input-btn-primary:hover:not(:disabled) {
  background: #1565c0 !important;
}
body.dark-mode .text-input-btn-primary:disabled {
  background: #555 !important;
  color: rgba(255, 255, 255, 0.38) !important;
}

/* Delete Image Modal (Native Dialog) */
.delete-image-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10010;
  pointer-events: auto;
}

.delete-image-modal-content {
  background: white;
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  min-width: 320px;
  max-width: 420px;
  width: 90%;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  z-index: 10011;
}

.delete-image-modal-header {
  background: #1976d2;
  color: white;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 0;
  pointer-events: auto;
}

.delete-image-modal-header .v-icon {
  margin-right: 0;
}

.delete-image-close-btn {
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.delete-image-close-btn:hover {
  opacity: 0.8;
}

.delete-image-modal-body {
  padding: 16px;
  pointer-events: auto;
}

.delete-image-modal-footer {
  padding: 8px 16px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  pointer-events: auto;
}

.delete-image-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  pointer-events: auto;
}

.delete-image-btn-cancel {
  background: transparent;
  color: #666;
}

.delete-image-btn-cancel:hover {
  background: #f5f5f5;
}

.delete-image-btn-primary {
  background: #f44336;
  color: white;
}

.delete-image-btn-primary:hover {
  background: #d32f2f;
}

/* Download Image Modal (Native Dialog) */
.download-image-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10010;
  pointer-events: auto;
}

.download-image-modal-content {
  background: white;
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  min-width: 320px;
  max-width: 420px;
  width: 90%;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  z-index: 10011;
}

.download-image-modal-header {
  background: #1976d2;
  color: white;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 0;
  pointer-events: auto;
}

.download-image-modal-header .v-icon {
  margin-right: 0;
}

.download-image-close-btn {
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  margin-left: auto;
}

.download-image-close-btn:hover {
  opacity: 0.8;
}

.download-image-modal-body {
  padding: 16px;
  pointer-events: auto;
}

.download-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.download-option-btn {
  padding: 12px 16px;
  border: 2px solid #1976d2;
  border-radius: 6px;
  background: white;
  color: #1976d2;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  pointer-events: auto;
}

.download-option-btn:hover {
  background: #1976d2;
  color: white;
}

.download-option-btn .v-icon {
  font-size: 18px;
}

.download-option-btn.disabled {
  background: #f5f5f5 !important;
  color: #999 !important;
  cursor: not-allowed !important;
  border-color: #ddd !important;
}

.download-option-btn.disabled:hover {
  background: #f5f5f5 !important;
  color: #999 !important;
}

/* Zone Edit Modal (Native Dialog) */
.zone-edit-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10010;
  pointer-events: auto;
}

.zone-edit-modal-content {
  background: white;
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  min-width: 400px;
  max-width: 500px;
  width: 90%;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  z-index: 10011;
}

.zone-edit-modal-header {
  background: #1976d2;
  color: white;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 0;
  pointer-events: auto;
}

.zone-edit-modal-header .v-icon {
  margin-right: 0;
}

.zone-edit-close-btn {
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.zone-edit-close-btn:hover {
  opacity: 0.8;
}

.zone-edit-modal-body {
  padding: 16px;
  pointer-events: auto;
}

.zone-edit-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
  pointer-events: auto !important;
  background: white;
  font-family: inherit;
  outline: none;
  resize: vertical;
}

.zone-edit-textarea:focus {
  border-color: #1976d2;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
  outline: none;
}

.zone-edit-modal-footer {
  padding: 8px 16px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
  pointer-events: auto;
}

.zone-edit-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.zone-edit-btn-cancel {
  background: transparent;
  color: #666;
}

.zone-edit-btn-cancel:hover {
  background: #f5f5f5;
}

.zone-edit-btn-primary {
  background: #1976d2;
  color: white;
}

.zone-edit-btn-primary:hover {
  background: #1565c0;
}

.zone-edit-btn-delete {
  background: #f44336;
  color: white;
  margin-right: auto;
}

.zone-edit-btn-delete:hover {
  background: #d32f2f;
}

/* Zone name tooltip styling */
.zone-name-tooltip {
  background: white !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  padding: 0 !important;
}

/* Dark mode tooltip - make text black */
body.dark-mode .zone-name-tooltip {
  background: white !important;
  border: 1px solid #ccc !important;
}

body.dark-mode .zone-name-tooltip * {
  color: #000000 !important;
}

/* Zone edit modal styles */
.zone-edit-label {
  display: block;
  margin-bottom: 8px;
  color: #666;
  font-size: 14px;
  font-weight: 500;
}

.zone-edit-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
  font-family: inherit;
  outline: none;
  background: white;
  color: #333;
}

.zone-edit-input:focus {
  border-color: #1976d2;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
}

/* Dark mode zone edit modal */
body.dark-mode .zone-edit-modal-content {
  background: #1e1e1e !important;
}

body.dark-mode .zone-edit-modal-body {
  color: #e0e0e0 !important;
}

body.dark-mode .zone-edit-label {
  color: #e0e0e0 !important;
}

body.dark-mode .zone-edit-input {
  background: #2f2f3f !important;
  color: #e0e0e0 !important;
  border-color: #555 !important;
}

body.dark-mode .zone-edit-input:focus {
  border-color: #1976d2 !important;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.3) !important;
}

body.dark-mode .zone-edit-textarea {
  background: #2f2f3f !important;
  color: #e0e0e0 !important;
  border-color: #555 !important;
}

body.dark-mode .zone-edit-textarea:focus {
  border-color: #1976d2 !important;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.3) !important;
}

body.dark-mode .zone-edit-modal-body > div > div {
  color: #e0e0e0 !important;
  background: #2f2f3f !important;
}

.zone-edit-created-date {
  color: #666;
  font-size: 12px;
  padding: 8px;
  background: #f5f5f5;
  border-radius: 4px;
}

body.dark-mode .zone-edit-created-date {
  color: #e0e0e0 !important;
  background: #2f2f3f !important;
}

.markup-tool-active {
  background-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6) !important;
}
.markup-canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: auto;
  z-index: 10;
  touch-action: none;
}
.image-carousel-dialog.v-dialog--fullscreen .carousel-controls {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  padding: 0 16px;
  z-index: 1005 !important;
  pointer-events: none;
}
.image-carousel-dialog.v-dialog--fullscreen .carousel-controls .v-btn {
  pointer-events: auto;
  z-index: 1005 !important;
}
.v-badge.badge-top-right .v-badge__badge {
  top: -8px !important;
  right: -8px !important;
  position: absolute !important;
  z-index: 2;
  transform: none !important;
}

/* PDO Register badges - position inside button */
.pdo-register-header .v-badge.badge-top-right .v-badge__badge {
  top: 2px !important;
  right: 2px !important;
  position: absolute !important;
  z-index: 2;
  transform: none !important;
}

.v-tabs-items .v-window-item:nth-child(2) .pin-form-content .auto-resize-textarea {
  width: 100% !important;
  margin-bottom: 8px;
}

.v-tabs-items .v-window-item:nth-child(2) .pin-form-content .rich-text-editor-wrapper {
  width: 100% !important;
  margin-bottom: 8px;
}
/* Uniform background for all floor level items */
.level-item {
  background-color: #f5f5f5 !important;
}

/* Optional: improve selected floor look */
.v-list-item.selected-floor {
  background-color: #424242 !important;
  color: white !important;
}

/* Prevent background from changing on hover for selected floor */
.v-list-item.selected-floor:hover {
  background-color: #424242 !important;
  color: white !important;
}

.pdo-register-header {
  background-color: #1976d2 !important;
  color: #ffffff !important;
}
.pdo-register-header .v-btn,
.pdo-register-header .v-icon,
.pdo-register-header .v-btn .v-icon {
  color: #ffffff !important;
}
.pdo-register-header .v-btn-toggle {
  gap: 0 !important;
}
.pdo-register-header .pdo-toggle-btn {
  background-color: #e0e0e0 !important;
  color: #424242 !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  margin-right: 0 !important;
  text-transform: none !important;
  font-size: 14px !important;
}
.pdo-register-header .pdo-toggle-btn:hover {
  background-color: #e0e0e0 !important;
  color: #424242 !important;
}
.pdo-register-header .v-btn-toggle .v-btn--active.pdo-toggle-btn,
.pdo-register-header .v-btn-toggle .v-btn--active.pdo-toggle-btn:hover {
  color: #1976d2 !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25) !important;
}
.theme--dark .pdo-register-header .pdo-toggle-btn {
  background-color: #2f2f3f !important;
  color: #f0f0f0 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}
.theme--dark .pdo-register-header .pdo-toggle-btn:hover {
  background-color: #2f2f3f !important;
  color: #f0f0f0 !important;
}
.theme--dark .pdo-register-header .v-btn-toggle .v-btn--active.pdo-toggle-btn,
.theme--dark .pdo-register-header .v-btn-toggle .v-btn--active.pdo-toggle-btn:hover {
  color: #64b5f6 !important;
}
.pdo-register-header .badge-top-right .v-badge__badge {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  top: 2px !important;
  right: 2px !important;
  position: absolute !important;
}
.pdo-register-header .badge-top-right .v-badge__badge::after {
  border-width: 1px !important;
}
.theme--dark .pdo-register-header .badge-top-right .v-badge__badge {
  border-color: rgba(255, 255, 255, 0.3) !important;
}
.theme--dark .pdo-register-header .badge-top-right .v-badge__badge::after {
  border-width: 1px !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* PDO Pulse Animation for Overdue PDOs */
@keyframes pdo-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.7);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 0 8px rgba(244, 67, 54, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
  }
}

.pdo-pulse-overdue {
  animation: pdo-pulse 2s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

/* PDO Report Styles */
#pdo-report-template {
  position: absolute;
  left: -9999px;
  width: 210mm;
  background: white;
  display: none;
}

/* Force PDO report to always use light (day) styling when app is in dark mode - PDF/print output stays consistent */
body.dark-mode #pdo-report-template,
body.dark-mode #pdo-report-template .pdo-report-container,
body.dark-mode #pdo-report-template .pdo-report-page,
body.dark-mode #pdo-report-template .pdo-report-header,
body.dark-mode #pdo-report-template .pdo-report-footer,
body.dark-mode #pdo-report-template .pdo-report-section,
body.dark-mode #pdo-report-template .pdo-report-details-grid,
body.dark-mode #pdo-report-template .pdo-report-split-container,
body.dark-mode #pdo-report-template .pdo-report-section-half-width,
body.dark-mode #pdo-report-template .pdo-report-section-half,
body.dark-mode #pdo-report-template .pdo-report-footer-content,
body.dark-mode #pdo-report-template .pdo-report-severity-content,
body.dark-mode #pdo-report-template .pdo-report-severity-info,
body.dark-mode #pdo-report-template .pdo-report-chart-container,
body.dark-mode #pdo-report-template .pdo-report-plotplan-container,
body.dark-mode #pdo-report-template .pdo-report-plotplan-info,
body.dark-mode #pdo-report-template .pdo-report-text-content,
body.dark-mode #pdo-report-template .pdo-report-images-grid,
body.dark-mode #pdo-report-template .pdo-report-image-item {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #1a1a1a !important;
}
body.dark-mode #pdo-report-template .pdo-report-meta,
body.dark-mode #pdo-report-template .pdo-report-label,
body.dark-mode #pdo-report-template .pdo-report-footer-text,
body.dark-mode #pdo-report-template .pdo-report-page-number {
  color: #7f8c8d !important;
}
body.dark-mode #pdo-report-template .pdo-report-value,
body.dark-mode #pdo-report-template .pdo-report-title,
body.dark-mode #pdo-report-template .pdo-report-id span,
body.dark-mode #pdo-report-template .pdo-report-asset,
body.dark-mode #pdo-report-template .pdo-report-company,
body.dark-mode #pdo-report-template .pdo-report-location,
body.dark-mode #pdo-report-template .pdo-report-level,
body.dark-mode #pdo-report-template .pdo-report-section-title,
body.dark-mode #pdo-report-template .pdo-report-text-content p,
body.dark-mode #pdo-report-template .pdo-report-plotplan-info .pdo-report-value {
  color: #1a1a1a !important;
}
body.dark-mode #pdo-report-template .pdo-report-details-grid {
  background: #f8f9fa !important;
  background-color: #f8f9fa !important;
}

.pdo-report-container {
  width: 210mm;
  padding: 0;
  background: #ffffff;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  color: #1a1a1a;
  box-sizing: border-box;
  line-height: 1.6;
}

/* Each page wrapper - modern design */
.pdo-report-page {
  width: 210mm;
  height: 297mm; /* Exact A4 height */
  padding: 0 8mm 0 8mm;
  padding-bottom: 25mm; /* Space for footer at bottom */
  box-sizing: border-box;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  page-break-inside: avoid;
  page-break-after: auto;
  position: relative;
  overflow: hidden;
}

/* First page should not have page break before */
.pdo-report-page-1 {
  page-break-before: auto !important;
  break-before: auto !important;
}

/* Don't force page break after last page */
.pdo-report-page:last-child {
  page-break-after: auto;
}

/* Page 1 - compact layout */
.pdo-report-page-1 {
  padding: 0 8mm 25mm 8mm;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 297mm; /* Exact A4 height */
}

/* Professional header design - clean and minimal */
.pdo-report-header {
  background: #ffffff;
  color: #1a1a1a;
  padding: 12px 8mm;
  margin-left: -8mm;
  margin-right: -8mm;
  margin-top: 0;
  margin-bottom: 12px;
  width: calc(100% + 16mm);
  border-radius: 0;
  border-bottom: 1px solid #e0e0e0;
  box-sizing: border-box;
}

/* Page breaks are now handled inline - no separate page-break divs */

/* Hide page 2 if both sections are empty */
.pdo-report-page-2:has(#report-hazard-section[style*="display: none"]):has(#report-mitigations-section[style*="display: none"]) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  page-break-before: auto !important;
  page-break-after: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide page 3 if images section is hidden */
.pdo-report-page-3:has(#report-images-section[style*="display: none"]) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  page-break-before: auto !important;
  page-break-after: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure hidden pages don't create blank pages */
.pdo-report-page[style*="display: none"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  page-break-before: auto !important;
  page-break-after: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Page 2 - compact split layout */
.pdo-report-page-2 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 8mm 25mm 8mm;
  height: 297mm; /* Exact A4 height */
}

/* Page 3 - images */
.pdo-report-page-3 {
  padding: 0 8mm 25mm 8mm;
  height: 297mm; /* Exact A4 height */
}

/* Footer with page numbers - fixed at bottom */
.pdo-report-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 25mm; /* Reduced footer height */
  padding: 8px 8mm;
  border-top: 1px solid #e0e0e0;
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  page-break-inside: avoid;
  z-index: 10;
  display: flex;
  align-items: center;
  margin-left: -8mm;
  margin-right: -8mm;
  padding-left: 8mm;
  padding-right: 8mm;
  width: calc(100% + 16mm);
}

.pdo-report-footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: 10px;
  color: #666;
  padding: 8px 0;
  box-sizing: border-box;
}

.pdo-report-footer-text {
  font-weight: 500;
  color: #616161;
  flex-shrink: 0;
  margin-right: auto;
  margin-left: 8mm; /* Align with header PDO ID padding */
}

.pdo-report-page-number {
  font-weight: 500;
  color: #666666;
  flex-shrink: 0;
  margin-left: auto;
  margin-right: 8mm; /* Add right margin to avoid page edge */
}

/* Page numbering - will be handled by html2pdf automatically */

/* Compact sections */
.pdo-report-section {
  margin-bottom: 10px;
  page-break-inside: avoid;
  break-inside: avoid;
  background: #ffffff;
  padding: 10px;
  border-radius: 4px;
  box-shadow: none;
  border: 1px solid #f0f0f0;
}

/* Ensure content doesn't overlap footer - add bottom margin to last section before footer */
.pdo-report-page > .pdo-report-section:last-of-type:not(.pdo-report-footer),
.pdo-report-page > .pdo-report-split-container:last-of-type {
  margin-bottom: 0; /* Footer handles spacing with absolute positioning */
}

/* Compact sections for page 1 */
.pdo-report-section-compact {
  margin-bottom: 8px;
  flex-shrink: 0;
  padding: 8px;
}

/* Split container for stacked sections */
.pdo-report-split-container {
  display: block;
  width: 100%;
  margin-bottom: 0;
  page-break-inside: avoid;
  break-inside: avoid;
}

/* Full-width sections for stacked layout */
.pdo-report-section-half-width {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 8px;
  margin-bottom: 4px;
}

/* Reduce spacing for plotplan section to bring it closer to footer */
.pdo-report-section-half-width:last-child {
  margin-bottom: 0;
}

/* Half-page sections for page 2 */
.pdo-report-section-half {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  page-break-inside: avoid;
  padding: 10px;
}

.pdo-report-title {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 6px 0;
  letter-spacing: -0.3px;
}

.pdo-report-meta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 10px;
  color: #666666;
  font-weight: 500;
  align-items: center;
}

.pdo-report-asset,
.pdo-report-company,
.pdo-report-location,
.pdo-report-level {
  font-weight: 400;
  color: inherit; /* Same text colour as meta (matches Asset ID) */
}

.pdo-report-id {
  color: #1976d2 !important; /* Blue color for PDO ID in reports */
  font-weight: 600;
}

.pdo-report-id span,
#report-pdo-id,
#report-pdo-id-continuation,
#report-pdo-id-continuation-2 {
  color: #1976d2 !important; /* Blue color for PDO ID in reports */
  font-weight: 600;
}

/* Add visual separators between header items */
.pdo-report-meta > div:not(:last-child)::after {
  content: "•";
  margin-left: 12px;
  color: #999;
  font-weight: bold;
}

.pdo-report-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #333333;
  margin: 0 0 8px 0;
  padding: 0 0 4px 0;
  border-bottom: 1px solid #cccccc;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.pdo-report-severity-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 0;
  flex: 1;
}

.pdo-report-severity-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  background: #f8f9fa;
  padding: 12px;
  border-radius: 8px;
}

.pdo-report-severity-info .pdo-report-field {
  background: transparent;
  border: none;
}

.pdo-report-chart-container {
  flex: 1;
  min-height: 180px;
  max-height: 200px;
  display: none; /* Hidden for PDF reports */
  justify-content: center;
  background: #ffffff;
  border: 2px solid #e3f2fd;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.pdo-report-chart-container canvas {
  max-width: 100%;
  max-height: 100%;
  width: 100% !important;
  height: auto !important;
}

/* Modern card-based details grid */
.pdo-report-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  width: 100%;
  box-sizing: border-box;
}

.pdo-report-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 2px;
  padding: 4px 0;
  background: transparent;
  border: none;
}

.pdo-report-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  color: #666;
  margin-bottom: 2px;
}

.pdo-report-value {
  font-size: 11px;
  font-weight: 500;
  color: #1a1a1a;
  word-wrap: break-word;
  line-height: 1.3;
}

.pdo-report-text-content p {
  margin: 0 0 8px 0;
}

.pdo-report-text-content p:last-child {
  margin-bottom: 0;
}

.pdo-report-text-content ul,
.pdo-report-text-content ol {
  margin: 8px 0;
  padding-left: 24px;
}

.pdo-report-text-content li {
  margin: 4px 0;
}

.pdo-report-text-content strong {
  font-weight: 600;
}

.pdo-report-text-content em {
  font-style: italic;
}

.pdo-report-text-content u {
  text-decoration: underline;
}

.pdo-report-text-content mark {
  background-color: #ffeb3b;
  padding: 2px 4px;
  border-radius: 2px;
}

.pdo-report-text-content {
  font-size: 10px;
  line-height: 1.4;
  color: #2c2c2c;
  white-space: normal; /* Changed from pre-wrap to support HTML formatting */
  padding: 8px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #f0f0f0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  flex: 1;
  overflow-y: auto;
}

/* Rich text content styling for PDF reports */
.pdo-report-text-content p {
  margin: 0 0 8px 0;
}

.pdo-report-text-content p:last-child {
  margin-bottom: 0;
}

.pdo-report-text-content ul,
.pdo-report-text-content ol {
  margin: 8px 0;
  padding-left: 24px;
}

.pdo-report-text-content li {
  margin: 4px 0;
}

.pdo-report-text-content strong {
  font-weight: 600;
}

.pdo-report-text-content em {
  font-style: italic;
}

.pdo-report-text-content u {
  text-decoration: underline;
}

.pdo-report-plotplan-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.pdo-report-plotplan-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  background: #f8f9fa;
  padding: 12px;
  border-radius: 8px;
}

.pdo-report-plotplan-info .pdo-report-field {
  background: transparent;
  border: none;
}

/* Hide coordinates field in plot plan */
.pdo-report-coordinates-field {
  display: none;
}

.pdo-report-plotplan-image-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  border: 2px solid #e3f2fd;
  border-radius: 8px;
  padding: 10px;
  page-break-inside: avoid;
  flex: 1;
  min-height: 110px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.pdo-report-plotplan-image-wrapper canvas {
  max-width: 100%;
  max-height: 200px;
  height: auto;
  border: none;
  border-radius: 6px;
  background: white;
}

.pdo-report-images-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, minmax(75mm, 1fr));
  gap: 16px;
  page-break-inside: avoid;
  height: 100%;
  max-height: 225mm; /* 3 rows × 75mm = 225mm, leaving space for other content */
}

.pdo-report-image-item {
  page-break-inside: avoid;
  break-inside: avoid;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.pdo-report-image-item img {
  width: 100%;
  height: auto;
  max-height: 60mm; /* Reduced to fit within 75mm row height with caption space */
  object-fit: contain;
  border: none;
  border-radius: 8px 8px 0 0;
  display: block;
  background: #f8f9fa;
}

.pdo-report-image-caption {
  font-size: 9px; /* Slightly smaller font for better fit */
  color: #666;
  margin: 0;
  padding: 6px 8px; /* Reduced padding for more space */
  text-align: center;
  background: #f8f9fa;
  font-weight: 500;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2; /* Standard property (limited support, helps linters) */
  -webkit-line-clamp: 2; /* Limit to 2 lines maximum */
  -webkit-box-orient: vertical;
}

/* Print Styles */
@media print {
  @page {
    size: A4;
    margin: 0;
  }
  
  body {
    margin: 0;
    padding: 0;
  }
  
  .pdo-report-container {
    width: 210mm;
    padding: 0;
    margin: 0;
  }
  
  .pdo-report-page {
    width: 210mm;
    min-height: 297mm; /* Minimum A4 height, allow expansion */
    padding: 0 8mm 25mm 8mm;
    page-break-inside: avoid;
    page-break-after: auto;
    overflow: visible; /* Allow content to flow to next pages */
    height: auto; /* Allow page to expand */
  }
  
  .pdo-report-page:last-child {
    page-break-after: auto;
  }
  
  /* Page breaks handled inline - no separate elements */
  
  .pdo-report-section {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  /* Footer styling in print - fixed at bottom */
  .pdo-report-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 35mm;
    padding: 12px 20mm;
    border-top: 2px solid #e0e0e0;
    width: 100%;
    background: #ffffff;
    margin-left: -20mm;
    margin-right: -20mm;
    padding-left: 20mm;
    padding-right: 20mm;
    width: calc(100% + 40mm);
  }
  
  .pdo-report-page {
    height: 297mm; /* Exact A4 height */
    padding-bottom: 35mm; /* Space for footer */
    overflow: hidden;
  }
  
  /* Hide empty pages in print - completely remove from rendering */
  .pdo-report-page-2[style*="display: none"],
  .pdo-report-page-3[style*="display: none"],
  .pdo-report-page[style*="display: none"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    page-break-before: auto !important;
    break-before: auto !important;
    page-break-after: auto !important;
    break-after: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
  
  .pdo-report-image-item {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  /* Ensure image grid fits properly in PDF */
  .pdo-report-images-grid {
    grid-template-rows: repeat(3, minmax(75mm, 1fr)) !important;
    max-height: 225mm !important;
    height: 100% !important;
  }

  .pdo-report-image-item {
    page-break-inside: avoid;
    break-inside: avoid;
    max-height: 75mm; /* Ensure each item fits in its grid cell */
  }

  .pdo-report-image-item img {
    max-height: 60mm !important; /* Consistent with screen styles */
  }
}


/* Risk Level Guidance Modal (Non-Vuetify) */
.risk-guidance-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000 !important; /* Higher than Vuetify dialogs to appear above PDO form */
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.risk-guidance-modal {
  background: #ffffff;
  border-radius: 0;
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
              0px 24px 38px 3px rgba(0, 0, 0, 0.14),
              0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  max-width: 480px;
  width: 90%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}


.risk-guidance-modal-content {
  padding: 16px 24px;
  flex: 1;
  overflow-y: auto;
}

.risk-guidance-intro {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
  letter-spacing: 0.009375em;
  color: rgba(0, 0, 0, 0.87);
  margin-bottom: 20px;
  text-align: left;
}

.risk-guidance-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.risk-guidance-item {
  padding: 12px 16px;
  background-color: #f8f9fa;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.risk-guidance-item:hover {
  background-color: #e9ecef;
}


.risk-guidance-item-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
  letter-spacing: 0.009375em;
  margin-bottom: 4px;
}

.risk-guidance-item-subtitle {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.25rem;
  letter-spacing: 0.0333333333em;
  color: rgba(0, 0, 0, 0.6);
}

.risk-guidance-modal-actions {
  padding: 8px 16px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.risk-guidance-close-btn {
  background-color: #1976d2;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.0892857143em;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 
              0px 2px 2px 0px rgba(0, 0, 0, 0.14), 
              0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  min-width: 64px;
}

.risk-guidance-close-btn:hover {
  background-color: #1565c0;
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 
              0px 4px 5px 0px rgba(0, 0, 0, 0.14), 
              0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.risk-guidance-close-btn:active {
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 
              0px 8px 10px 1px rgba(0, 0, 0, 0.14), 
              0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.risk-guidance-close-btn:focus {
  outline: none;
}

/* Risk Level Guidance Modal - dark mode (match custom PDO type modal) */
body.dark-mode .risk-guidance-modal-overlay,
.dark-mode .risk-guidance-modal-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

body.dark-mode .risk-guidance-modal,
.dark-mode .risk-guidance-modal {
  background: #2f2f3f;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

body.dark-mode .risk-guidance-modal-content,
.dark-mode .risk-guidance-modal-content {
  background: #2f2f3f;
}

body.dark-mode .risk-guidance-intro,
.dark-mode .risk-guidance-intro {
  color: #e0e0e0;
}

body.dark-mode .risk-guidance-item,
.dark-mode .risk-guidance-item {
  background-color: #1e1e1e;
  border: 1px solid #444;
}

body.dark-mode .risk-guidance-item:hover,
.dark-mode .risk-guidance-item:hover {
  background-color: #2a2a2a;
}

body.dark-mode .risk-guidance-item-title,
.dark-mode .risk-guidance-item-title {
  color: #e0e0e0;
}

body.dark-mode .risk-guidance-item-subtitle,
.dark-mode .risk-guidance-item-subtitle {
  color: rgba(255, 255, 255, 0.7);
}

body.dark-mode .risk-guidance-modal-actions,
.dark-mode .risk-guidance-modal-actions {
  background: #1e1e1e;
  border-top-color: #444;
}

/* Custom Modal Styles (Non-Vuetify) */
.custom-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000 !important; /* Higher than Vuetify dialogs (9999) to appear above PDO form */
  animation: fadeIn 0.2s ease;
}

/* Hide modals and banners until Vue is fully ready to prevent flash on navigation */
body:not([data-vue-ready="true"]) .custom-modal-overlay,
body:not([data-vue-ready="true"]) .zone-edit-modal-overlay,
body:not([data-vue-ready="true"]) .delete-image-modal-overlay,
body:not([data-vue-ready="true"]) #remove-date-banner,
body:not([data-vue-ready="true"]) .v-dialog {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.custom-modal {
  background: #ffffff;
  border-radius: 0;
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 
              0px 24px 38px 3px rgba(0, 0, 0, 0.14), 
              0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.3s ease;
}

.custom-modal-header {
  padding: 16px 20px;
  background: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  position: relative;
  z-index: 2;
}

.custom-modal-header-primary {
  background: #1976d2 !important;
  color: white !important;
  border-bottom-color: #1565c0;
}

.custom-modal-header-warning {
  background: linear-gradient(135deg, #ff9800, #f57c00) !important;
  color: white !important;
  border-bottom-color: #f57c00;
}

.custom-modal-header-success {
  background: #4caf50 !important;
  color: white !important;
  border-bottom-color: #388e3c;
}

.custom-modal-header-danger {
  background: #f44336 !important;
  color: white !important;
  border-bottom-color: #d32f2f;
}

.custom-modal-header-icon {
  font-size: 20px;
}

.custom-modal-title {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: 0.009375em;
  color: rgba(0, 0, 0, 0.87);
  margin: 0;
}

.custom-modal-title-white {
  color: #ffffff;
}

/* Modal close X – consistent white, 40×40, same across all modals */
.custom-modal-close-btn {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.custom-modal-close-btn:hover {
  background-color: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
}

.custom-modal-header-primary .custom-modal-close-btn,
.custom-modal-header-warning .custom-modal-close-btn,
.custom-modal-header-success .custom-modal-close-btn,
.custom-modal-header-danger .custom-modal-close-btn {
  color: #ffffff;
}

.custom-modal-content {
  padding: 16px 24px;
  flex: 1;
  overflow-y: auto;
  pointer-events: auto;
}

.custom-modal-actions {
  padding: 8px 16px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

/* Zone Details Modal */
.zone-details-modal {
  max-width: 400px;
  width: 90%;
}

.zone-details-field {
  margin-bottom: 16px;
}

.zone-details-field:last-child {
  margin-bottom: 0;
}

.zone-details-field strong {
  display: block;
  margin-bottom: 4px;
  color: rgba(0, 0, 0, 0.87);
  font-weight: 500;
}

.zone-details-field span {
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.5;
}

/* Dark mode styles for zone details */
body.dark-mode .zone-details-field strong {
  color: rgba(255, 255, 255, 0.87);
}

body.dark-mode .zone-details-field span {
  color: rgba(255, 255, 255, 0.6);
}

/* Custom Alert Styles */
.custom-alert {
  padding: 12px 16px;
  border-radius: 4px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.custom-alert-warning {
  background-color: #fff3e0;
  border-left: 4px solid #ff9800;
  color: #e65100;
}

.custom-alert-info {
  background-color: #e3f2fd;
  border-left: 4px solid #2196f3;
  color: #1976d2;
}

.custom-alert-icon {
  font-size: 20px;
  flex-shrink: 0;
}

/* Custom Chip Styles */
.pdo-type-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.custom-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}

.custom-chip-grey {
  background-color: #616161;
  color: #ffffff;
}

.custom-chip-primary {
  background-color: #1976d2;
  color: #ffffff;
  padding-right: 8px;
}

.custom-chip-close {
  background: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  margin-left: 4px;
  padding: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.custom-chip-close:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Custom Text Field Styles */
.custom-text-field-wrapper {
  position: relative;
  margin-top: 16px;
}

.custom-text-field {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.38);
  border-radius: 4px;
  font-size: 0.875rem;
  line-height: 1.5;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.custom-text-field:focus {
  outline: none;
  border-color: #1976d2;
  border-width: 2px;
  padding: 11px 15px;
}

.custom-text-field:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
  opacity: 0.6;
}

.custom-text-field-label {
  position: absolute;
  top: -8px;
  left: 12px;
  background: #ffffff;
  padding: 0 4px;
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* Custom Button Styles */
.custom-btn {
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.0892857143em;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 
              0px 2px 2px 0px rgba(0, 0, 0, 0.14), 
              0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  min-width: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.custom-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

.custom-btn-primary {
  background-color: #1976d2;
  color: #ffffff;
}

.custom-btn-primary:hover:not(:disabled) {
  background-color: #1565c0;
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 
              0px 4px 5px 0px rgba(0, 0, 0, 0.14), 
              0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.custom-btn-secondary {
  background-color: #9e9e9e;
  color: #ffffff;
}

.custom-btn-secondary:hover:not(:disabled) {
  background-color: #757575;
}

.custom-btn-text {
  background: none;
  color: rgba(0, 0, 0, 0.87);
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
}

.custom-btn-text:hover:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.04);
}

.custom-btn-danger {
  background-color: #f44336;
  color: #ffffff;
}

.custom-btn-danger:hover:not(:disabled) {
  background-color: #d32f2f;
}

.custom-btn-warning {
  background-color: #ff9800;
  color: #ffffff;
}

.custom-btn-warning:hover:not(:disabled) {
  background-color: #f57c00;
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 
              0px 4px 5px 0px rgba(0, 0, 0, 0.14), 
              0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.custom-btn-success {
  background-color: #4caf50;
  color: #ffffff;
}

.custom-btn-success:hover:not(:disabled) {
  background-color: #43a047;
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 
              0px 4px 5px 0px rgba(0, 0, 0, 0.14), 
              0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.custom-btn-loading {
  position: relative;
  color: transparent;
}

.custom-btn-spinner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Custom Divider */
.custom-divider {
  height: 1px;
  background-color: rgba(0, 0, 0, 0.12);
  margin: 16px 0;
}

/* PDO Type Manager Specific Styles */
.pdo-type-manager-modal {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 12px !important;
}

.pdo-type-section {
  margin-bottom: 16px;
}

.pdo-type-section-title {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.375rem;
  letter-spacing: 0.0071428571em;
  color: rgba(0, 0, 0, 0.87);
  margin: 0 0 8px 0;
}

body.dark-mode .pdo-type-manager-modal .pdo-type-section-title,
body.dark-mode .pdo-type-manager-modal .pdo-type-section,
body.dark-mode .pdo-type-manager-modal .custom-alert,
body.dark-mode .pdo-type-manager-modal .custom-alert span {
  color: #e0e0e0 !important;
}

body.dark-mode .pdo-type-manager-modal .custom-alert-warning {
  background-color: rgba(255, 152, 0, 0.15);
  border-left-color: #ff9800;
  color: #ffcc80 !important;
}

body.dark-mode .pdo-type-manager-modal .custom-alert-info {
  background-color: rgba(33, 150, 243, 0.15);
  border-left-color: #2196f3;
  color: #90caf9 !important;
}

/* Search PDO Modal Specific Styles */
/* ===== SEARCH PDO MODAL - COMPLETE RESTYLE ===== */

/* Modal Overlay */
.search-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(2px);
}

/* Modal Container */
.search-modal-container {
  background: white;
  border-radius: 0;
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
              0px 24px 38px 3px rgba(0, 0, 0, 0.14),
              0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  width: 480px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Modal Header - don't shrink so body scrolls */
.search-modal-header {
  flex-shrink: 0;
  background: #1976d2;
  color: white;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 0;
  min-height: 64px;
}

.search-modal-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 40px;
}

.search-modal-close {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Modal Body - min-height: 0 so flex child can shrink and show vertical scroll */
.search-modal-body {
  padding: 24px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #9e9e9e rgba(0, 0, 0, 0.08);
}

/* Show scrollbar in Search PDO modal (override global ::-webkit-scrollbar { display: none }) */
.search-modal-body::-webkit-scrollbar {
  width: 8px;
  display: block;
}
.search-modal-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
}
.search-modal-body::-webkit-scrollbar-thumb {
  background: #9e9e9e;
  border-radius: 4px;
}
.search-modal-body::-webkit-scrollbar-thumb:hover {
  background: #757575;
}

/* Search Input Container */
.search-input-container {
  margin-bottom: 16px;
}

.pdo-search-input {
  width: 100%;
}

.pdo-search-input {
  margin-bottom: 12px;
}

.pdo-search-input .v-select__slot label {
  font-size: 14px;
  color: #424242;
}

/* Dropdown Menu Styling - list of PDO names */
/* contentClass: 'pdo-search-dropdown' so we can target portaled menu (not inside .pdo-search-input) */
.pdo-search-dropdown.v-menu__content,
.pdo-search-input .v-menu__content {
  z-index: 10050 !important;
  border-radius: 4px;
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
              0px 8px 10px 1px rgba(0, 0, 0, 0.14),
              0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  border: 1px solid #e0e0e0;
  margin-top: 4px;
  max-height: 300px;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: #9e9e9e rgba(0, 0, 0, 0.08);
}

/* Visible scrollbar for PDO dropdown list (override global ::-webkit-scrollbar { display: none }) */
.pdo-search-dropdown.v-menu__content::-webkit-scrollbar,
.pdo-search-input .v-menu__content::-webkit-scrollbar {
  width: 8px;
  display: block;
}
.pdo-search-dropdown.v-menu__content::-webkit-scrollbar-track,
.pdo-search-input .v-menu__content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
}
.pdo-search-dropdown.v-menu__content::-webkit-scrollbar-thumb,
.pdo-search-input .v-menu__content::-webkit-scrollbar-thumb {
  background: #9e9e9e;
  border-radius: 4px;
}
.pdo-search-dropdown.v-menu__content::-webkit-scrollbar-thumb:hover,
.pdo-search-input .v-menu__content::-webkit-scrollbar-thumb:hover {
  background: #757575;
}

/* In case Vuetify puts overflow on the list inside the menu */
.pdo-search-dropdown.v-menu__content .v-list,
.pdo-search-input .v-menu__content .v-list {
  max-height: 300px;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: #9e9e9e rgba(0, 0, 0, 0.08);
}
.pdo-search-dropdown.v-menu__content .v-list::-webkit-scrollbar,
.pdo-search-input .v-menu__content .v-list::-webkit-scrollbar {
  width: 8px;
  display: block;
}
.pdo-search-dropdown.v-menu__content .v-list::-webkit-scrollbar-track,
.pdo-search-input .v-menu__content .v-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
}
.pdo-search-dropdown.v-menu__content .v-list::-webkit-scrollbar-thumb,
.pdo-search-input .v-menu__content .v-list::-webkit-scrollbar-thumb {
  background: #9e9e9e;
  border-radius: 4px;
}
.pdo-search-dropdown.v-menu__content .v-list::-webkit-scrollbar-thumb:hover,
.pdo-search-input .v-menu__content .v-list::-webkit-scrollbar-thumb:hover {
  background: #757575;
}

.pdo-search-input .v-select .v-menu {
  z-index: 10050 !important;
}

.pdo-search-input .v-select {
  position: relative;
}

/* PDO Option Items */
.pdo-option {
  padding: 12px 16px;
  border-bottom: 1px solid #f1f3f4;
  cursor: pointer;
  transition: background-color 0.15s;
}

.pdo-option:hover {
  background: transparent;
}

/* Search PDO modal: no hover background change */
.pdo-search-input .v-list-item:hover {
  background: #fff !important;
}
.pdo-search-input .pdo-option:hover {
  background: transparent !important;
}

.pdo-option:last-child {
  border-bottom: none;
}

.pdo-option-name {
  font-weight: 500;
  color: #2c3e50;
  font-size: 14px;
  margin-bottom: 4px;
}

.pdo-option-meta {
  font-size: 12px;
  color: #607d8b;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pdo-level {
  color: #546e7a;
}

.pdo-archived {
  color: #d32f2f;
  font-weight: 500;
}

/* PDO Selection Display */
.pdo-selection {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pdo-selection-name {
  font-weight: 500;
  color: #2c3e50;
}

.pdo-selection-level {
  color: #607d8b;
  font-size: 14px;
}

.pdo-archived-chip {
  margin-left: 4px !important;
}

/* No Results Message */
.search-no-results {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #e9ecef;
  margin-top: 16px;
}

.no-results-icon {
  font-size: 20px;
  color: #1976d2;
}

.no-results-text {
  color: #546e7a;
  font-size: 14px;
}

/* Modal Footer - don't shrink so body scrolls */
.search-modal-footer {
  flex-shrink: 0;
  padding: 20px 24px;
  background: #fafbfc;
  border-top: 1px solid #e9ecef;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-radius: 0 0 8px 8px;
}

/* Buttons */
.search-btn {
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-btn-secondary {
  background: white;
  color: #546e7a;
  border: 1px solid #e9ecef;
}

.search-btn-secondary:hover {
  background: #f8f9fa;
  border-color: #d0d7de;
}

.search-btn-primary {
  background: #1976d2;
  color: white;
}

.search-btn-primary:hover:not(:disabled) {
  background: #1565c0;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
}

.search-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Dark mode support */
body.dark-mode .search-modal-container {
  background: #2a2a3c;
  color: #e0e0e0;
}

body.dark-mode .search-modal-header {
  background: #1976d2;
}

body.dark-mode .search-modal-footer {
  background: #1e1e2e;
  border-top-color: #404040;
}

body.dark-mode .pdo-search-input .v-input__control {
  background: #1e1e2e;
}

body.dark-mode .pdo-search-input.v-text-field--outlined .v-input__control .v-input__slot {
  border-color: #404040;
  background: #1e1e2e;
}

body.dark-mode .pdo-option {
  border-bottom-color: #404040;
}

body.dark-mode .pdo-option-name {
  color: #e0e0e0;
}

body.dark-mode .pdo-option-meta {
  color: #b0b0b0;
}

body.dark-mode .search-no-results {
  background: #1e1e2e;
  border-color: #404040;
  color: #b0b0b0;
}

/* Audit Info Modal Specific Styles */
.audit-info-modal {
  min-width: 600px !important;
  max-width: 700px !important;
  max-height: 80vh !important;
  overflow: hidden !important;
  border-radius: 8px !important;
}


.audit-info-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(80vh - 120px); /* Account for header height */
  overflow-y: auto;
  padding-right: 8px;
}

.audit-info-content::-webkit-scrollbar {
  width: 6px;
}

.audit-info-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.audit-info-content::-webkit-scrollbar-thumb {
  background: #9e9e9e;
  border-radius: 3px;
}

.audit-info-content::-webkit-scrollbar-thumb:hover {
  background: #757575;
}

.audit-row {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.audit-comment-spacing {
  margin-top: 8px;
}

.audit-form-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.audit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-self: flex-end;
}

.audit-history {
  max-height: none;
  overflow-y: visible;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
  width: 100%;
  box-sizing: border-box;
  flex: 1;
}

.audit-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.audit-entry {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px;
  background: #f9f9f9;
}

.dark-mode .audit-entry,
body.dark-mode .audit-entry {
  background: #2f2f3f !important;
  border-color: rgba(255, 255, 255, 0.12);
}

.audit-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.audit-entry-header .audit-actions {
  display: flex;
  gap: 4px;
  margin-left: 8px;
}

.audit-edit-btn,
.audit-delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 3px;
  font-size: 14px;
  opacity: 0.7;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.audit-edit-btn:hover {
  opacity: 1;
  background-color: rgba(25, 118, 210, 0.1);
}

.audit-delete-btn:hover {
  opacity: 1;
  background-color: rgba(244, 67, 54, 0.1);
}

.audit-delete-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.audit-edit-form {
  margin-top: 8px;
}

.audit-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  justify-content: flex-end;
}

.audit-comment-empty {
  font-style: italic;
  color: #999;
  padding: 8px;
  background: #f9f9f9;
  border-radius: 4px;
}

.dark-mode .audit-comment-empty,
body.dark-mode .audit-comment-empty {
  background: #2f2f3f !important;
  color: rgba(255, 255, 255, 0.6);
}

.audit-date {
  font-weight: 700;
  color: #000000;
  font-size: 0.9rem;
}

.audit-user {
  font-size: 0.9rem;
  color: #666;
  font-weight: 400;
}

.audit-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.audit-next-review {
  font-size: 0.9rem;
  color: #666;
  font-weight: 400;
}

.audit-comment {
  font-style: italic;
  color: #333;
  background: #fff;
  padding: 8px;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 400;
}

.dark-mode .audit-comment,
body.dark-mode .audit-comment {
  background: #2f2f3f !important;
  color: #e0e0e0;
}

/* History Modal Specific Styles */
.history-modal {
  min-width: 500px !important;
  max-width: 500px !important;
  border-radius: 4px !important;
}

.history-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.history-item {
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.87);
  padding: 4px 0;
}

.history-item strong {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.87);
  margin-right: 8px;
}

body.dark-mode .history-modal .history-content,
body.dark-mode .history-modal .history-item,
body.dark-mode .history-modal .history-item strong {
  color: #e0e0e0 !important;
}

body.dark-mode .history-modal .history-section h4 {
  color: #90caf9 !important;
}

body.dark-mode .history-modal .history-section em {
  color: #b0b0b0 !important;
}

.history-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.audit-history-entry {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  background: #f9f9f9;
}

.dark-mode .audit-history-entry,
body.dark-mode .audit-history-entry {
  background: #2f2f3f !important;
  border-color: rgba(255, 255, 255, 0.12);
}

.audit-history-header {
  font-size: 0.9em;
  margin-bottom: 6px;
  color: #000000;
}

body.dark-mode .history-modal .audit-history-header {
  color: #e0e0e0 !important;
}

.audit-history-comment {
  font-style: italic;
  color: #333;
  margin: 4px 0;
  padding: 6px;
  background: #fff;
  border-radius: 4px;
  font-size: 0.85em;
}

.dark-mode .audit-history-comment,
body.dark-mode .audit-history-comment {
  background: #2f2f3f !important;
  color: #e0e0e0;
}

.audit-history-next {
  font-size: 0.8em;
  color: #666;
  margin-top: 4px;
}

body.dark-mode .history-modal .audit-history-next {
  color: #b0b0b0 !important;
}

.audit-history-divider {
  border-top: 1px solid #e0e0e0;
  margin-top: 8px;
}

/* Archive Modal Specific Styles */
.archive-modal {
  min-width: 500px !important;
  max-width: 500px !important;
  border-radius: 8px !important;
}

.archive-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.archive-message {
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.87);
  margin: 0;
}

.archive-message strong {
  font-weight: 600;
  color: rgba(0, 0, 0, 0.87);
}

.archive-warning {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.6);
  margin: 0;
  padding: 12px;
  background-color: #fff3e0;
  border-radius: 4px;
}

body.dark-mode .archive-warning {
  background-color: #5d4037;
  color: #ffffff;
}

/* Restore Modal Specific Styles */
.restore-modal {
  min-width: 500px !important;
  max-width: 500px !important;
  border-radius: 4px !important;
}

.restore-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.restore-message {
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.87);
  margin: 0;
}

.restore-message strong {
  font-weight: 600;
  color: rgba(0, 0, 0, 0.87);
}

.restore-info {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.6);
  margin: 0;
  padding: 12px;
  background-color: #e8f5e9;
  border-radius: 4px;
}

body.dark-mode .restore-info {
  background-color: #2e7d32;
  color: #ffffff;
}

/* Delete Modal Specific Styles */
.delete-modal {
  min-width: 500px !important;
  max-width: 500px !important;
  min-height: 450px !important;
  max-height: 450px !important;
}

/* PDO Delete Confirmation Modal Styles */
.pdo-delete-confirmation-content {
  padding: 16px 0;
}
.pdo-delete-confirmation-message {
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.87);
  margin: 0 0 16px 0;
}
.dark-mode .pdo-delete-confirmation-message {
  color: rgba(255, 255, 255, 0.87);
}
.pdo-delete-confirmation-warning {
  font-size: 0.875rem;
  line-height: 1.4;
  color: #f44336;
  margin: 0 0 20px 0;
  background: rgba(244, 67, 54, 0.08);
  padding: 12px;
  border-radius: 4px;
  border-left: 4px solid #f44336;
}
.dark-mode .pdo-delete-confirmation-warning {
  color: #ff5252;
  background: rgba(255, 82, 82, 0.08);
  border-left-color: #ff5252;
}
.pdo-delete-confirmation-input {
  margin-top: 20px;
}
.pdo-delete-confirmation-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.87);
  margin-bottom: 8px;
}
.dark-mode .pdo-delete-confirmation-label {
  color: rgba(255, 255, 255, 0.87);
}
.pdo-delete-confirmation-input-field {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(0, 0, 0, 0.23);
  border-radius: 4px;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.9);
  color: rgba(0, 0, 0, 0.87);
  box-sizing: border-box;
}
.pdo-delete-confirmation-input-field:focus {
  outline: none;
  border-color: #1976d2;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
}
.dark-mode .pdo-delete-confirmation-input-field {
  background: rgba(66, 66, 66, 0.9);
  border-color: rgba(255, 255, 255, 0.23);
  color: rgba(255, 255, 255, 0.87);
}
.dark-mode .pdo-delete-confirmation-input-field:focus {
  border-color: #2196f3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}
.pdo-delete-confirmation-input-field::placeholder {
  color: rgba(0, 0, 0, 0.38);
}
.dark-mode .pdo-delete-confirmation-input-field::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.delete-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.delete-message {
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.87);
  margin: 0;
}

body.dark-mode .delete-modal .delete-message,
body.dark-mode .delete-modal .delete-content {
  color: #CFD8DC !important;
}

body.dark-mode .delete-modal .delete-message strong {
  color: #CFD8DC !important;
}

.delete-all-markups-verify {
  margin-top: 8px;
}
.delete-all-markups-verify-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.87);
  margin-bottom: 8px;
}
body.dark-mode .delete-modal .delete-all-markups-verify-label {
  color: #CFD8DC !important;
}
body.dark-mode .delete-modal .delete-all-markups-verify-label strong {
  color: #CFD8DC !important;
}
.delete-all-markups-verify-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(0, 0, 0, 0.23);
  border-radius: 4px;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.9);
  color: rgba(0, 0, 0, 0.87);
  box-sizing: border-box;
}
.delete-all-markups-verify-input:focus {
  outline: none;
  border-color: #1976d2;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
}
body.dark-mode .delete-modal .delete-all-markups-verify-input {
  background: rgba(66, 66, 66, 0.9);
  border-color: rgba(255, 255, 255, 0.23);
  color: rgba(255, 255, 255, 0.87);
}
body.dark-mode .delete-modal .delete-all-markups-verify-input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}
body.dark-mode .delete-modal .delete-all-markups-verify-input:focus {
  border-color: #2196f3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

.delete-message strong {
  font-weight: 600;
  color: rgba(0, 0, 0, 0.87);
}

.delete-warning {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.87);
  margin: 0;
  padding: 12px;
  background-color: #ffebee;
  border-radius: 4px;
}

body.dark-mode .delete-warning {
  background-color: #4a148c;
  color: #ffffff;
}

.delete-warning strong {
  font-weight: 600;
  color: #d32f2f;
}

body.dark-mode .delete-warning strong {
  color: #ffcdd2;
}

/* User Settings Modal Specific Styles */
.user-settings-modal {
  min-width: 500px !important;
  max-width: 500px !important;
  border-radius: 8px !important;
}

/* Create Asset Modal Specific Styles */
.asset-modal {
  min-width: 500px !important;
  max-width: 500px !important;
  min-height: 300px !important;
  max-height: 300px !important;
}

/* Users Table Container for Infinite Scroll */
.users-table-container {
  max-height: 600px;
  overflow-y: auto;
}

.user-settings-info {
  margin-bottom: 16px;
}

.user-settings-name {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.87);
  margin-bottom: 8px;
  padding-top: 12px;
}

.user-settings-email-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.user-settings-email {
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.87);
}

.user-settings-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.0892857143em;
}

.user-settings-chip-superAdmin {
  background-color: #7b1fa2;
}

.user-settings-chip-admin {
  background-color: #4caf50;
}

.user-settings-chip-user {
  background-color: #2196f3;
}

.user-settings-chip-readonly,
.user-settings-chip-readOnly {
  background-color: #9e9e9e;
}

.user-settings-expiry {
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.6);
  margin-top: 8px;
}

.user-settings-divider {
  height: 1px;
  background-color: rgba(0, 0, 0, 0.12);
  margin: 12px 0;
}

.user-settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.user-settings-toggle-label {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.87);
}

/* Custom Toggle Switch */
.custom-toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  cursor: pointer;
}

.custom-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.custom-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.38);
  transition: 0.3s;
  border-radius: 20px;
}

.custom-toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 
              0px 2px 2px 0px rgba(0, 0, 0, 0.14), 
              0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

.custom-toggle-switch input:checked + .custom-toggle-slider {
  background-color: #1976d2;
}

.custom-toggle-switch input:checked + .custom-toggle-slider:before {
  transform: translateX(20px);
}

.custom-toggle-switch input:focus + .custom-toggle-slider {
  box-shadow: 0 0 1px #1976d2;
}

/* Outlined Button Style */
.custom-btn-outlined {
  background-color: transparent !important;
  border: 1px solid currentColor;
  box-shadow: none !important;
}

.custom-btn-outlined:hover:not(:disabled) {
  background-color: rgba(25, 118, 210, 0.08) !important;
  box-shadow: none !important;
}

.custom-btn-primary.custom-btn-outlined {
  color: #1976d2;
  border-color: #1976d2;
}

.custom-btn-primary.custom-btn-outlined:hover:not(:disabled) {
  background-color: rgba(25, 118, 210, 0.08) !important;
}

/* Full Width Button */
.custom-btn-full-width {
  width: 100%;
  display: flex;
  justify-content: center;
}

.custom-btn-icon {
  font-size: 1rem;
  line-height: 1;
}

/* Dark Mode Support for User Settings Modal */
body.dark-mode .user-settings-name,
body.dark-mode .user-settings-email,
body.dark-mode .user-settings-toggle-label {
  color: rgba(255, 255, 255, 0.87);
}

body.dark-mode .user-settings-expiry {
  color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .user-settings-divider {
  background-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode .custom-modal-content {
  background-color: #2A2A3C;
  color: rgba(255, 255, 255, 0.87);
}

body.dark-mode .custom-text-field-label {
  background: #2A2A3C;
  color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .custom-text-field {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.87);
}

body.dark-mode .custom-text-field:focus {
  border-color: #1976d2;
}

body.dark-mode .custom-btn-primary.custom-btn-outlined {
  color: #1976d2;
  border-color: #1976d2;
}


/* Ensure modal actions are interactive */
.custom-modal-actions button {
  pointer-events: auto !important;
}

/* Force textarea to be interactive - override any parent blocking */
.caption-modal .caption-textarea {
  pointer-events: auto !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
  cursor: text !important;
  z-index: 10032 !important;
  position: relative !important;
}

/* Nuclear option - ensure textarea is ALWAYS interactive */
textarea.caption-textarea {
  pointer-events: auto !important;
  user-select: text !important;
  cursor: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  -webkit-appearance: textfield !important;
  appearance: textfield !important;
}

/* Emergency override - make sure NOTHING blocks this textarea */
.caption-modal textarea,
.caption-modal .caption-edit textarea,
div.caption-edit textarea {
  pointer-events: auto !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  cursor: text !important;
  background: white !important;
  border: 2px solid #1976d2 !important;
  outline: none !important;
}

body.dark-mode .custom-btn-primary.custom-btn-outlined:hover:not(:disabled) {
  background-color: rgba(25, 118, 210, 0.2) !important;
}

/* Sort chevron visual indicators */
.sort-chevron {
  margin-left: 4px;
  opacity: 0.6;
  transition: transform 0.2s, opacity 0.2s, color 0.2s;
}

.sort-chevron.sort-active {
  opacity: 0.8;
  color: #666 !important;
}

.sort-chevron.sort-desc {
  transform: rotate(180deg);
  color: #1976d2 !important;
  opacity: 1;
}

/* PDO filter column spacing */
.filter-col {
  padding-left: 6px !important;
  padding-right: 6px !important;
}
.filter-col:first-child {
  padding-left: 0 !important;
}
.filter-col:last-child {
  padding-right: 0 !important;
}

/* Delete All Markups button in Level Settings: force red in dark mode (override .dark-mode .level-settings-modal .v-icon) */
body.dark-mode .v-dialog__content .v-dialog.level-settings-modal .level-settings-delete-all-markups-btn.v-btn,
body.dark-mode .v-dialog.level-settings-modal .level-settings-delete-all-markups-btn.v-btn,
body.dark-mode .level-settings-modal .level-settings-delete-all-markups-btn.v-btn {
  color: #f44336 !important;
  border-color: #f44336 !important;
}
body.dark-mode .v-dialog__content .v-dialog.level-settings-modal .level-settings-delete-all-markups-btn .v-icon,
body.dark-mode .v-dialog.level-settings-modal .level-settings-delete-all-markups-btn .v-icon,
body.dark-mode .level-settings-modal .level-settings-delete-all-markups-btn .v-icon,
body.dark-mode .level-settings-modal .level-settings-delete-all-markups-btn .v-btn__content {
  color: #f44336 !important;
}

/* Location delete icons in Level Settings: force red in dark mode (same specificity as delete-all-markups) */
body.dark-mode .v-dialog__content .v-dialog.level-settings-modal .level-settings-delete-location-btn.v-btn,
body.dark-mode .v-dialog.level-settings-modal .level-settings-delete-location-btn.v-btn,
body.dark-mode .level-settings-modal .level-settings-delete-location-btn.v-btn,
body.dark-mode .v-dialog__content .v-dialog.level-settings-modal .level-settings-delete-location-btn .v-icon,
body.dark-mode .v-dialog.level-settings-modal .level-settings-delete-location-btn .v-icon,
body.dark-mode .level-settings-modal .level-settings-delete-location-btn .v-icon,
body.dark-mode .level-settings-modal .level-settings-delete-location-btn .v-btn__content {
  color: #f44336 !important;
}