/* 
 * HttpUi 3.x - Tailwind & Modern CSS Adaptation 
 * Incorporates Bootstrap 5 fallback classes natively used by httpui.js 
 */

/* 1. Loader Spinners (Glassmorphism + Tailwind Indigos) */
.aj-loader-parent {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(2px);
  z-index: 50; display: flex; align-items: center; justify-content: center;
  transition: opacity 0.3s ease;
  border-radius: inherit; /* matches the parent UI container */
}

.aj-loader-element { 
  width: 48px; 
  height: 48px; 
}

.aj-loader-element .aj-circular {
  animation: aj-rotate 2s linear infinite; 
  height: 100%; width: 100%; 
  transform-origin: center center;
}

.aj-loader-element .path {
  stroke-dasharray: 1, 200; 
  stroke-dashoffset: 0; 
  stroke: #4f46e5; /* Tailwind indigo-600 */
  stroke-linecap: round;
  animation: aj-dash 1.5s ease-in-out infinite;
}

@keyframes aj-rotate { 100% { transform: rotate(360deg); } }
@keyframes aj-dash {
  0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; }
  100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; }
}

/* 2. Notifications Container (Fixed Toasts) */
.aj-notification {
  position: fixed; 
  top: 1.5rem; 
  right: 1.5rem; 
  z-index: 9999;
  display: flex; 
  flex-direction: column; 
  gap: 0.75rem;
  max-width: 90vw;
  width: 400px;
}

/* 3. Bootstrap .alert Shim (Toast Box) */
.aj-notification > .alert {
  padding: 1rem 1.25rem; 
  border-radius: 0.5rem; 
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  display: flex; 
  flex-direction: column;
  position: relative;
  min-width: 300px;
  background: white;
  animation: slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  color: #1f2937; /* gray-800 */
}

@keyframes slide-in { 
  from { opacity: 0; transform: translateY(-10px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); } 
}

/* 4. Alert Colors */
.aj-notification .alert-success { 
  background: #f0fdf4; /* green-50 */
  border-left: 4px solid #16a34a; /* green-600 */
  color: #166534; /* green-800 */
}

.aj-notification .alert-danger { 
  background: #fef2f2; /* red-50 */
  border-left: 4px solid #ef4444; /* red-500 */
  color: #991b1b; /* red-800 */
}

.aj-notification .alert-info { 
  background: #eff6ff; /* blue-50 */
  border-left: 4px solid #3b82f6; /* blue-500 */
  color: #1e40af; /* blue-800 */
}

/* 5. Validation Maps (ul/li errors) */
.aj-notification ul {
  margin-top: 0.5rem;
  padding-left: 1.25rem;
  list-style-type: disc;
  font-size: 0.875rem; /* text-sm */
  opacity: 0.9;
}

/* 6. Close Button Shim */
.btn-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: transparent; 
  border: none; 
  font-size: 1.5rem;
  line-height: 1; 
  cursor: pointer; 
  color: inherit; 
  opacity: 0.5; 
  font-weight: 300;
}
.btn-close::before { content: "×"; }
.btn-close:hover { opacity: 1; }

/* 7. Detailed Button Shim (for 500 errors) */
.btn-detailed {
    background-color: #f1f5f9; /* slate-100 */
    border: 1px solid #cbd5e1; /* slate-300 */
    color: #475569; /* slate-600 */
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.25rem;
    margin-top: 0.5rem;
    cursor: pointer;
    align-self: flex-start;
    transition: all 0.2s;
}
.btn-detailed:hover {
    background-color: #e2e8f0;
    color: #1e293b;
}

/* 8. Detailed Stacktrace Payload Wrapper */
.aj-error-report {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: #1e293b; /* slate-800 */
    color: #f8fafc; /* slate-50 */
    text-align: left;
    font-size: 0.875rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    overflow: hidden;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

.aj-error-report .btn-detailed {
    float: right;
    margin-top: -0.25rem;
    background: #334155;
    border-color: #475569;
    color: white;
}

.aj-error-response {
    margin-top: 0.75rem;
    background-color: white;
    color: black;
    border-radius: 0.25rem;
    overflow: hidden;
}

.aj-error-response > textarea,
.aj-error-response > .aj-error-response-iframe {
    width: 100%;
    min-height: 350px;
    border: none;
    padding: 0.5rem;
    resize: vertical;
}

/* 9. Page Content Entrance Animation */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}