/* Base theme variables already in tokens.css 

    styles/base.css
*/


/* General Body Styles */
body {
  margin: 0;
  background-color: var(--theme-background, #f8f9fa);
  font-family: Arial, sans-serif;
  color: var(--text-primary, #333333);
  overflow-x: hidden;
  overflow-y: scroll;
  /* Force vertical scrollbar to prevent layout shifts */
}

/* Logged-in layout uses flex for viewport fill */
body[data-logged-in="true"] {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header Styles */
header {
  background-color: var(--surface-background, #f8f9fa);
  border-bottom: 1px solid var(--surface-default, #ffffff);
  padding: 16px 24px;
}

header,
main,
footer {
  padding: 0 20px;
  box-sizing: border-box;
  max-width: 100%;
}

/* Main element - flex child that fills remaining space */
main {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  border-top: 1px solid var(--background-subtle, rgba(0, 0, 0, 0.1));
}

/* Main content card - flex container for viewport fill */
#mainContent {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: auto;  /* Default: allow scrolling for normal content */
  background-color: var(--surface-default, #ffffff);
  padding: 8px 20px 15px 20px;
  border-radius: 4px;
  margin-top: -1px;
  box-shadow: none;
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.1));
}

/* Header should not flex */
#mainContent .doc-header {
  flex: 0 0 auto;
}

/* When question grid stage is active: remove padding and let AG Grid manage scrolling */
#mainContent:has(.rfp-answer-questions-stage) {
  padding-bottom: 0;
  overflow: visible;  /* AG Grid manages its own scrollbars */
}

/* Form Elements */
input,
textarea {
  font-family: inherit;
  border: 1px solid var(--input-border);
}

input:disabled,
textarea:disabled,
select:disabled {
  color: var(--input-disabled-text, #999999);
  background-color: var(--input-disabled-bg, #e9ecef);
}

button:disabled {
  opacity: var(--opacity-disabled, 0.65);
  cursor: not-allowed;
}

/* Top Bar */
#topBarRoot {
  padding: 0 20px;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  margin-bottom: 1rem;
  position: sticky;
  top: 0;
  /* Sticks to the top of the viewport */
  overflow: hidden;
  z-index: 99;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  max-width: 100%;
  box-sizing: border-box;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: var(--interactive-primary, #0e3048);
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Hide text labels at 1000px and below */
@media (max-width: 1000px) {
  .icon-text {
    display: none !important;
  }

  .icon {
    padding: 4px 4px;
    justify-content: center;
  }

  .icon i {
    margin-right: 0 !important;
  }

  .logout-text,
  .login-text,
  .register-text {
    display: none;
  }
}

.status-icons {
  display: flex;
  gap: 16px;
}

.icon {
  position: relative;
  font-size: 14px;
  color: var(--text-secondary, #666666);
  cursor: pointer;
  margin-right: 10px;
}

.icon .notif-count {
  position: absolute;
  top: -14px;
  right: -12px;
  background-color: var(--status-notification);
  color: white;
  font-size: 12px;
  padding: 0;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  font-weight: 600;
  line-height: 1;
}

/* Hidden state - takes precedence */
.icon .notif-count--hidden {
  display: none !important;
}

/* Circle shape for single-digit counts (0-9) - default is already circular */
.icon .notif-count--circle {
  border-radius: 50%;
  min-width: 20px;
  width: 20px;
  height: 20px;
  padding: 0;
}

/* Pill shape for double-digit counts (10-99) and 100+ */
.icon .notif-count--pill {
  border-radius: 10px;
  /* half of height for pill shape */
  min-width: 28px;
  width: auto;
  height: 20px;
  padding: 0 6px;
  /* horizontal padding for breathing room */
}

.accounts-icon,
.projects-icon {
  cursor: pointer;
  padding: 0.5rem;
  position: relative;
  /* ensures consistent alignment with other icons */
}

.accounts-icon:hover,
.projects-icon:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.user-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--surface-tab-border-active, #0e3048);
  border-radius: 999px;
  font-size: 14px;
  color: var(--text-primary, #333333);
}

/* Document Header Styles */
.doc-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 12px 0px;
  background-color: var(--surface-default, #ffffff);
  border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.1));
}

.doc-header--compact {
  padding: 8px 0px !important;
  /* Reduced from 12px to 8px */
  min-height: auto !important;
}

@media (max-width: 768px) {
  .doc-header--compact {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .doc-title-container {
    min-width: auto;
    width: 100%;
  }

  .doc-status-container {
    /* width: 100%; */
    justify-content: flex-end;
  }

  .doc-title--compact {
    font-size: 14px !important;
  }
}

.doc-title--compact {
  font-size: 16px !important;
  /* Reduced from 18px */
  margin: 0 !important;
  line-height: 1.3 !important;
}

.doc-title-container {
  flex: 1;
  min-width: 250px;
  display: flex;
  align-items: center;
  gap: 8px;
  /* Space between title and info icon */
}

.doc-status-container {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 130px;
}

.doc-info-icon {
  color: #666;
  font-size: 14px;
  cursor: help;
  transition: color 0.2s;
}

.doc-info-icon:hover {
  color: #007bff;
}

.doc-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #333333);
  display: flex;
  align-items: center;
  gap: 8px;
}


.stage-link.active {
  color: var(--text-primary, #333333);
  background-color: var(--interactive-hover, rgba(14, 48, 72, 0.1));
  font-weight: 500;
}

.stage-separator {
  color: var(--text-secondary, #666666);
  margin: 0 2px;
  opacity: 0.5;
}

/* Footer */
footer {
  background-color: var(--surface-background, #f8f9fa);
  color: var(--text-secondary, #666666);
  text-align: center;
  padding: 20px 0;
  width: 100%;
  box-sizing: border-box;
}

/* Links and Buttons */
.register-link,
.login-link,
.logout-link,
.username {
  background: transparent;
  border: none;
  color: var(--text-primary, #333333);
  cursor: pointer;
  font-size: 14px;
  padding: 0;
}

@media (max-width: 768px) {
  .logout-text {
    display: none;
  }

  .top-bar-right {
    gap: 15px;
  }
}

/* Tooltip CSS Fixes
   This CSS complements the improved tooltip.js implementation
*/

/* Base tooltip icon styling */
.tooltip-icon {
  cursor: help !important;
  color: #666;
  font-size: 14px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  z-index: 5;
  /* Ensure it's above other form elements */
  transition: color 0.2s;
}

/* Hover effect */
.tooltip-icon:hover {
  color: #007bff;
}

/* Tooltip popup styling with improved visibility */
.custom-tooltip {
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 14px;
  max-width: 300px;
  z-index: 10000;
  /* Very high z-index to ensure visibility */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  line-height: 1.4;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Make tooltip always accessible */
body .custom-tooltip {
  display: none;
  opacity: 0;
}

body .custom-tooltip.visible {
  display: block !important;
  opacity: 1 !important;
}

/* Form layout improvements for tooltip icons */
.form-group {
  margin-bottom: 15px;
  position: relative;
}

/* Checkbox container to prevent label issues */
.checkbox-container {
  display: flex;
  align-items: center;
  position: relative;
}

.checkbox-container label {
  margin-right: 5px;
  cursor: pointer;
  user-select: none;
}

.checkbox-container input[type="checkbox"] {
  margin-right: 5px;
  cursor: pointer;
}

/* Prevent icons in checkbox containers from accidentally triggering checkbox */
.checkbox-container .tooltip-icon {
  margin-left: 8px;
  /* Extra space to reduce accidental clicks */
  padding: 2px;
}

/* Flex container for label + tooltip */
.label-with-tooltip {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

/* Slider container improvements */
.slider-container {
  position: relative;
  width: 100%;
  margin-top: 5px;
}

/* Add small indicator of tooltip availability for better UX */
.tooltip-icon::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 5px;
  height: 5px;
  background: rgba(0, 123, 255, 0.5);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s;
}

.tooltip-icon:hover::after {
  opacity: 1;
}

/* Ensure labels with tooltips display correctly */
label+.tooltip-icon {
  top: -4px;
  display: inline-block;
  vertical-align: middle;
}

/* Loading state improvements for tooltips during initialization */
.tooltip-icon.initializing {
  opacity: 0.5;
}

/* ==========================================
   GLOBAL CURSOR FIXES
   ========================================== */

/* Critical fix: Ensure interactive elements maintain pointer cursor
   This addresses issues potentially caused by external libraries like Shoelace
   that might override cursor behavior */
button:not(:disabled),
.btn:not(:disabled),
a[href]:not([disabled]),
[role="button"]:not([disabled]),
input[type="button"]:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="reset"]:not(:disabled),
[onclick]:not([disabled]) {
  cursor: pointer !important;
}