/* Sheet-specific styling for fixing display issues */

/* Sticky toolbar */
#permanentToolbar {
  position: sticky !important;
  top: 0 !important;
  z-index: var(--z-sticky) !important;
  background-color: var(--surface-raised, #f8f9fa) !important;
  padding: 10px !important;
  border-bottom: 1px solid var(--border-color, #dee2e6) !important;
  margin-bottom: 15px !important;
}

/* Table layout fixes (scoped to sheet page — this file loads globally) */
.og-sheet-page .table-responsive {
  overflow-x: auto !important;
  overflow-y: visible !important;
  width: 100% !important;
  position: relative !important;
}

/* Container styling */
.og-sheet-page .card-body {
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding: 1rem !important;
}

/* Fix table header styles */
#sheetTable th {
  position: relative !important;
  min-width: 100px !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

/* Improve cell display */
#sheetTable td {
  min-width: 150px !important;
  max-width: 400px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Column resizer styling */
.resizer {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  height: 100% !important;
  width: 5px !important;
  background: rgba(0, 0, 0, 0.1) !important;
  cursor: col-resize !important;
  user-select: none !important;
  z-index: 10 !important;
}

.resizer:hover,
.resizing-active .resizer {
  background-color: var(--primary) !important;
}

/* Fix notification positioning - scoped to sheet container only */
.sheet-container .notification,
.sheet-container .alert {
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  z-index: 9999 !important;
  max-width: 400px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1) !important;
}

/* Validation modals: do not set global .modal z-index here — it overrides base-overrides.css
   and traps modals (e.g. admin) under the backdrop. Sheet validation modal uses inline positioning. */

/* Table structure */
#sheetTable {
  table-layout: fixed !important;
  width: max-content !important;
  min-width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Column headers — match app nav chrome (was unwired sheet.css) */
#sheetTable th {
  background: var(--nav-gradient) !important;
  color: var(--text-inverse, #fff) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
}

/* Ensure select elements in cells work correctly */
.list-validation-select {
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Fix validation button appearance */
.validation-btn {
  opacity: 0.8 !important;
  margin-left: 5px !important;
  z-index: 20 !important;
  position: relative !important;
  font-size: 0.75rem !important;
  padding: 0.1rem 0.3rem !important;
  right: 15px !important;
  top: 5px !important;
}

.validation-btn:hover {
  opacity: 1 !important;
}

/* Add better styling for focused cells */
.og-sheet-page td:focus-within {
  box-shadow: inset 0 0 0 2px var(--primary) !important;
  outline: none !important;
}

/* Ensure colgroup works with the resizing */
#sheetTable colgroup col {
  width: auto !important;
}

/* Animation for resizing */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.7); }
  70% { box-shadow: 0 0 0 5px rgba(13, 110, 253, 0); }
  100% { box-shadow: 0 0 0 0 rgba(13, 110, 253, 0); }
}

.resizing-active .resizer {
  animation: pulse 1s infinite;
}

/* Ensure all sheet table cells honor their width */
#sheetTable th[style*="width"],
#sheetTable td[style*="width"] {
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Fix for user management modal */
#userManagementModal {
  z-index: var(--z-modal) !important;
}

#userManagementModal .modal-dialog {
  z-index: var(--z-modal) !important;
}

#userManagementModal .modal-content {
  z-index: var(--z-modal) !important;
}

#userManagementModal .modal-body {
  overflow: visible !important;
  max-height: none !important;
  z-index: var(--z-modal) !important;
}

#userManagementModal .user-access-settings {
  overflow: visible !important;
  max-height: none !important;
  z-index: var(--z-modal) !important;
}