/*
  This file contains styles that are only active in debug mode.
  Elements with the 'debug-only' class will be hidden by default.
*/

/* Hide debug-only elements by default */
.debug-only {
  display: none !important; /* Use !important to override other potential styles */
}

/* Show debug-only elements when the body has the 'debug-mode' class */
.debug-mode .debug-only {
  display: block !important; /* Or 'flex', 'inline-block', etc., as needed */
}

/* You can also style the debug button differently */
.debug-mode .debug-only.btn-debug {
    display: inline-block !important;
    border: 1px dashed #f0ad4e;
    background-color: rgba(240, 173, 78, 0.1);
    color: #f0ad4e;
}