/*
 * Right-Side Panel Component
 *
 * A reusable right-side sliding panel with semi-transparent backdrop.
 * Used throughout the application for wizards, forms, and detail views.
 *
 * Usage:
 * ------
 * <div class="modal fade right-panel-modal" id="myPanel"
 *      data-controller="right-panel"
 *      data-bs-backdrop="true">
 *   <div class="modal-dialog right-panel-dialog">
 *     <div class="modal-content right-panel-content">
 *       <!-- Your content here -->
 *     </div>
 *   </div>
 * </div>
 *
 * Customization:
 * --------------
 * Add additional classes for specific styling:
 * - .right-panel-dialog--wide (1200px width)
 * - .right-panel-dialog--narrow (600px width)
 * - Or add your own custom classes
 */

/* ========================================
   BOX-SIZING FIX - Ensure consistent box model
   ======================================== */

.right-panel-modal,
.right-panel-modal *,
.right-panel-dialog,
.right-panel-content,
.modal-body {
  box-sizing: border-box !important;
}

/* ========================================
   BACKDROP - Semi-transparent overlay
   ======================================== */

.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5) !important;
  opacity: 1 !important;
  z-index: 1050 !important;
}

.modal-backdrop.show {
  background-color: rgba(0, 0, 0, 0.5) !important;
  opacity: 1 !important;
  z-index: 1050 !important;
}

.modal-backdrop.fade.show {
  opacity: 1 !important;
  z-index: 1050 !important;
}

/* ========================================
   RIGHT PANEL - Modal container
   ======================================== */

.right-panel-modal {
  z-index: 1055 !important;
}

/* ========================================
   RIGHT PANEL DIALOG - The sliding panel
   ======================================== */

.right-panel-dialog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  max-width: 900px;
  width: 100%;
  height: 100vh;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  z-index: 1056 !important;
}

.right-panel-modal.show .right-panel-dialog {
  transform: translateX(0);
}

/* Panel width variants */
.right-panel-dialog--narrow {
  max-width: 600px;
}

.right-panel-dialog--wide {
  max-width: 1200px;
}

/* ========================================
   RIGHT PANEL CONTENT - Inner container
   ======================================== */

.right-panel-content {
  height: 100%;
  border-radius: 0;
  border: none;
  border-left: 1px solid var(--fluent-gray-30);
  background-color: var(--fluent-white);
  display: flex;
  flex-direction: column;
  z-index: 1056 !important;
}

/* ========================================
   PANEL SECTIONS - Header, Body, Footer
   ======================================== */

.right-panel-header {
  padding: var(--fluent-space-2xl);
  border-bottom: 1px solid var(--fluent-gray-20);
  background-color: var(--fluent-white);
  flex-shrink: 0;
}

.right-panel-header h2,
.right-panel-header h3 {
  margin: 0;
  font-size: var(--fluent-font-size-xl);
  font-weight: var(--fluent-font-weight-bold);
  color: var(--fluent-gray-100);
}

.right-panel-header p {
  margin: var(--fluent-space-sm) 0 0;
  font-size: var(--fluent-font-size-sm);
  color: var(--fluent-gray-70);
  line-height: 1.5;
}

.right-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--fluent-space-2xl);
  background-color: var(--fluent-white);
}

.right-panel-footer {
  padding: var(--fluent-space-lg) var(--fluent-space-2xl);
  border-top: 1px solid var(--fluent-gray-20);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--fluent-white);
  flex-shrink: 0;
}

/* ========================================
   RESPONSIVE BEHAVIOR
   ======================================== */

@media (max-width: 768px) {
  .right-panel-dialog {
    max-width: 100%;
  }
}

@media (max-width: 576px) {
  .right-panel-header,
  .right-panel-body,
  .right-panel-footer {
    padding: var(--fluent-space-lg);
  }
}

/* ========================================
   CLOSE BUTTON (optional)
   ======================================== */

.right-panel-close {
  position: absolute;
  top: var(--fluent-space-lg);
  right: var(--fluent-space-lg);
  background: none;
  border: none;
  font-size: var(--fluent-font-size-xl);
  color: var(--fluent-gray-60);
  cursor: pointer;
  padding: var(--fluent-space-xs);
  line-height: 1;
  z-index: 10;
  transition: color var(--fluent-transition-fast);
}

.right-panel-close:hover {
  color: var(--fluent-gray-90);
}