/* 

Additonal css details for ajax-test.php, not related to system messages.

*/


@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
    20%, 40%, 60%, 80% { transform: translateX(6px); }
}
.error-state {
      border-color: #dc3545 !important;
      box-shadow: 0 0 0 0.25rem rgba(220,53,69,.25) !important;
      animation: shake 0.82s cubic-bezier(0.36,0.07,0.19,0.97) both; 
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Optional: make disabled button look better with spinner */
.btn:disabled .spinner-border {
  vertical-align: middle;
}

/* Optional: fade the text a bit when loading */
.btn-loading {
  opacity: 0.85;
  cursor: not-allowed;
}

/* If you want the spinner to be the only content (no text) */
.btn-spinner-only[data-loading] {
  min-width: 3rem;           /* prevent shrinking */
}

/*  messages.css - Full-width bottom message bar  */

#system-messages {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    pointer-events: none;
}

.system-message {
    padding: 16px;
    text-align: center;
    color: white;
    font-weight: 500;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.system-message.show {
    opacity: 1;
    transform: translateY(0);
}

.system-message.hide {
    opacity: 0;
    transform: translateY(20px);
}

/* Background colors */
.system-message.success,
.system-message.mess-good {
    background-color: #28a745; /* green */
}

.system-message.danger,
.system-message.mess-bad {
    background-color: #dc3545; /* red */
}

.system-message.warning,
.system-message.mess-warning {
    background-color: #ffc107; /* yellow */
}

.navbar-fs-small {
    font-size: small;
}

 .modal.show { display: block !important}


 .version-number {
    font-size: 0.8em;
    color: #c2c2c2;
    margin-left: 8px;
}

.version-number::before {
    content: "v";
}