/**
 * Katacart Theme - Error and Warning Messages
 * Compact, clean design with proper spacing
 */

/* ============================================
   COLOR VARIABLES
   ============================================ */
:root {
  --error-bg: #FFE8E8;
  --error-border: #BA0B0B;
  --error-text: #BA0B0B;
  
  --warning-bg: #FBF2D6;
  --warning-border: #D7A000;
  --warning-text: #D7A000;
  
  --success-bg: #E7F8F0;
  --success-border: #00B464;
  --success-text: #00B464;
  
  --forest-green-100: #002823;
}

/* ============================================
   ALL MESSAGES - COMPACT STYLING
   ============================================ */

.messages-list {
  margin-bottom: 1rem;
  clear: both;
}

.messages-list__item {
  margin: 0.75rem 0 !important;
  padding: 0.875rem 1.25rem !important;
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  font-size: 14px;
  line-height: 1.5;
}

/* ============================================
   ERROR MESSAGES - RED
   ============================================ */

.messages--error {
  background-color: var(--error-bg) !important;
  border-color: var(--error-border) !important;
  color: var(--error-text) !important;
}

.messages--error .messages__header {
  color: var(--error-text) !important;
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 0.5rem 0 !important;
}

.messages--error .messages__list {
  margin: 0 !important;
  padding: 0 0 0 1.25rem !important;
}

.messages--error .messages__item {
  margin: 0.25rem 0 !important;
  line-height: 1.5;
}

/* ============================================
   WARNING MESSAGES - YELLOW
   ============================================ */

.messages--warning {
  background-color: var(--warning-bg) !important;
  border-color: var(--warning-border) !important;
  color: var(--warning-text) !important;
}

.messages--warning .messages__header {
  color: var(--warning-text) !important;
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 0.5rem 0 !important;
}

.messages--warning .messages__list {
  margin: 0 !important;
  padding: 0 0 0 1.25rem !important;
}

.messages--warning .messages__item {
  margin: 0.25rem 0 !important;
  line-height: 1.5;
}

/* ============================================
   SUCCESS/STATUS MESSAGES - GREEN
   ============================================ */

.messages--status {
  background-color: var(--success-bg) !important;
  border-color: var(--success-border) !important;
  color: var(--success-text) !important;
}

.messages--status .messages__header {
  color: var(--success-text) !important;
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 0.5rem 0 !important;
}

/* ============================================
   ICON SPACING
   ============================================ */

.messages::before {
  margin-right: 0.75rem !important;
}

/* ============================================
   ERROR DETAILS/BACKTRACE - COMPACT
   ============================================ */

.error-with-backtrace > summary {
  padding: 0.5rem 0.875rem !important;
  margin-top: 0.5rem !important;
  cursor: pointer;
  border-radius: 4px;
  background-color: rgba(186, 11, 11, 0.1);
  font-weight: 500;
  font-size: 13px;
  transition: background-color 0.2s ease;
}

.error-with-backtrace > summary:hover {
  background-color: rgba(186, 11, 11, 0.15);
}

.error-with-backtrace details[open] {
  margin-top: 0.5rem;
}

.error-with-backtrace pre {
  margin: 0.75rem 0 !important;
  padding: 0.75rem !important;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.4;
}

/* ============================================
   LAYOUT BUILDER CONTEXT
   ============================================ */

.layout-builder-form .messages {
  margin-bottom: 1rem !important;
}

.layout-builder-form .messages__header {
  margin-bottom: 0.5rem !important;
}

/* ============================================
   LAYOUT BUILDER FORM BUTTONS
   ============================================ */

.layout-builder-form .form-actions .button,
#layout-builder-form .form-actions .button,
.layout-builder-form .form-actions input[type="submit"],
#layout-builder-form .form-actions input[type="submit"] {
  background-color: var(--forest-green-100);
  border-color: var(--forest-green-100);
  color: #fff;
  transition: all 0.2s ease;
}

.layout-builder-form .form-actions .button:hover,
#layout-builder-form .form-actions .button:hover,
.layout-builder-form .form-actions input[type="submit"]:hover,
#layout-builder-form .form-actions input[type="submit"]:hover {
  background-color: #fff;
  border-color: var(--forest-green-100);
  color: var(--forest-green-100);
}

.layout-builder-form .form-actions,
#layout-builder-form .form-actions {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 0;
}

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

@media (max-width: 768px) {
  .messages-list__item {
    padding: 0.75rem 1rem !important;
    font-size: 13px;
  }
  
  .messages--error .messages__header,
  .messages--warning .messages__header,
  .messages--status .messages__header {
    font-size: 14px;
  }
  
  .error-with-backtrace > summary {
    padding: 0.5rem 0.75rem !important;
    font-size: 12px;
  }
}