/*
APPLICATION-WIDE FINAL OVERRIDES
----------------------------------
This file is intended for very specific CSS overrides that must take precedence 
over all other stylesheets (custom_bootstrap.css, main.css, and inline tenant styles).

Use sparingly and comment each override clearly, explaining:
1. What it fixes/changes.
2. Why it's necessary (e.g., specificity battles, quick fixes).
3. If it's a temporary fix, note that too.

Regularly review these overrides to see if they can be integrated more cleanly into 
main.css or custom_bootstrap.css, especially after component refactors or 
Bootstrap/library updates.
*/

.invalid-feedback {
    position: static;
  }

.recommended-field {
  border: 2px solid red; /* Orange border */
  /*background-color: rgb(250, 145, 145); /* Light yellow background */
}

/* Force tenant navbar background color */
/* This rule overrides MDB's !important rule because this file is loaded last */
.navbar.tenant-navbar-bg {
  background-color: var(--bs-primary) !important; 
}

/* Loading state for navigation buttons */
/* Maintains button width during loading to prevent layout shift */
.btn.loading {
  min-width: 140px; /* Ensures button doesn't shrink when text changes to "Loading..." */
  pointer-events: none; /* Prevents interaction during loading */
  opacity: 0.8; /* Slight fade to indicate disabled state */
}

/* Remove focus shadow from friendly name input group - fixes overlap with button */
/* This aggressive override is necessary because Bootstrap applies multiple focus styles */
#id_friendly_name:focus,
#friendly-name-group input:focus,
#friendly-name-group .form-control:focus,
.input-group > #id_friendly_name:focus,
.input-group #id_friendly_name:focus {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  -o-box-shadow: none !important;
  border-color: #ced4da !important;
  outline: none !important;
}

/* Remove focus effects from friendly name edit button */
#edit-friendly-name-btn:focus,
#edit-friendly-name-btn:active,
#edit-friendly-name-btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* Custom Interactive Card Styles - Now using standardized .workspace-card */
/* Legacy .custom-interactive-card class is mapped to .workspace-card in _cards.css */

/* Workspace card specific styles - Now moved to standardized components */
/* Typography and stats sections now use the standardized .workspace-card class */

/* Stats section with shadcn-inspired styling */
.card-stats-section {
    background: #f8fafc; /* Light gray background */
    border: 1px solid rgba(0, 0, 0, 0.06); /* Subtle border */
    border-radius: 0.375rem; /* Rounded corners */
    padding: 0.75rem 1rem; /* Comfortable padding */
    margin: 1rem 0; /* Space above and below */
    box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Subtle inset shadow for depth */
}

.card-stats-section .stat-item {
    padding: 0.5rem 0; /* Vertical padding for each stat */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Subtle divider */
}

.card-stats-section .stat-item:last-child {
    border-bottom: none; /* Remove border from last item */
}

.card-stats-section .stat-item span:first-child {
    font-size: 0.875rem; /* Smaller text */
    color: #64748b; /* Muted color */
    font-weight: 500; /* Medium weight */
}

/* HTMX Indicator Override to prevent layout shift */
.htmx-indicator {
    display: none !important;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: block !important;
    opacity: 1;
    transition: opacity 200ms ease-in;
}

/* Fix vertical alignment for inline btn-link elements in paragraphs */
/* This fixes the misalignment caused by Bootstrap's vertical-align: middle on .btn */
p .btn-link,
li .btn-link,
.alert .btn-link {
    vertical-align: baseline !important; /* Align with text baseline instead of middle */
    padding: 0 !important; /* Ensure no padding affects alignment */
    line-height: inherit; /* Inherit line-height from parent text */
}

/* Stepper connecting line is now properly styled in main.css */
/* Previous override that hid the connecting line has been removed */

/* Fix button colors to use tenant-specific CSS variables */
/* This overrides the hardcoded colors from custom_bootstrap.css */
.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    filter: brightness(0.85); /* Darken on hover */
}

.btn-outline-primary {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: white !important;
}

/* Fix help text indentation for checkboxes */
/* Target form-text inside form-check, accounting for mx-4 margin on checkbox */
/* COMMENTED OUT: This was applying to ALL form-check elements, not just those with mx-4
   TODO: Create more specific selectors for forms that actually need this indentation
.form-check .form-text {
    display: block;
    margin-top: 0.25rem;
    margin-left: 4rem !important; /* Align with label text */
    margin-right: 1.5rem; /* Match the mx-4 right margin */
}
*/

/* Workspace Creation Page Background */
/* Uses WebP format with JPG fallback for older browsers */
.workspace-create-bg {
  background-image: url('/static/img/BackgroundBlocks.webp'), 
                    url('/static/img/BackgroundBlocks.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: calc(100vh - 56px); /* Account for navbar height */
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
}

/* Semi-transparent overlay for better content readability */
.workspace-create-overlay {
  background-color: rgba(248, 249, 250, 0.95); /* Light background with high opacity */
  backdrop-filter: blur(2px); /* Subtle blur effect for modern browsers */
  -webkit-backdrop-filter: blur(2px); /* Safari support */
}

/* Shadcn-style Loading Spinner */
.shadcn-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: shadcn-spin 0.6s linear infinite;
  color: var(--bs-primary);
}

.shadcn-spinner.spinner-sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.shadcn-spinner.spinner-lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

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

/* Replace Bootstrap spinner in specific contexts */
.htmx-indicator .spinner-border,
#workspace-content .spinner-border,
#producer-workspaces-container .spinner-border,
#consumer-workspaces-container .spinner-border {
  display: none;
}

.htmx-indicator .spinner-border + .visually-hidden,
#workspace-content .spinner-border + .visually-hidden,
#producer-workspaces-container .spinner-border + .visually-hidden,
#consumer-workspaces-container .spinner-border + .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Container for new spinner */
.loading-spinner-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}