Support

Um, you have it backwards. Akeeba Ticket System has been around since 2011, originally as a custom component for our own site. We expanded it into a commercial product in 2013. ATS is actually a bit different than most helpdesk solutions –and every helpdesk Joomla extension from that era– in that its styling is inspired by Internet forums, not traditional helpdesk software. I am happy other people copied my concept and design so thoroughly as to confuse you about what came first; after all, imitation is the sincerest form of flattery.

The default styling in ATS uses Bootstrap 5 components, same as everything else in Joomla. That's why it looks familiar to you. It's the same design language you see in your Joomla backend. Even our custom CSS uses mostly the same design language. As for customisation, I have documented it. I even provide the SCSS source.

Regarding custom fields, please note that their styling is handled by your template (core custom fields), and their plugin code (third party custom fields). The whole point in having custom fields in Joomla is that first and third party extensions don't have to reinvent the wheel to edit or display them, that's all handled by Joomla itself.

I hope that helps.

Not insulted at all. I just find it amusing 😀

<input type="text" name="jform[com_fields][return-items][row0][field26]" id="jform_com_fields__return_items__row0__field26" value="" class="form-control ra-qty required" placeholder="ra-qty" maxlength="2" required="" aria-required="true" autocomplete="off">

These are Joomla custom fields. As I explained, these are not handled by ATS or any other core Joomla or third party extension using them. They are handled by Joomla itself. That weird HTML? That's what Joomla outputs into the form; we can't control that. The CSS for them? It's either in your template, or loaded by the corresponding custom field plugin; we can't control that either.

In this particular case you have a simple text input field, so it's styled by your template. If you want to override the template's styling of an input field you have to write a CSS rule that's more specific that what's in your template, or resort to using !important in your CSS rules.

As to whether your template loads a user.css or custom.css file from the template's folder, that's up to the template itself. For example, let's take a look at the core Cassiopeia template. We see the following in the templates/cassiopeia/joomla.asset.json file:

{
  "name": "template.user",
  "description": "A file where a user can add their own css.",
  "type": "style",
  "uri": "user.css",
  "weight": 500,
  "dependencies": [
    "template.active",
    "template.active.language"
  ]
},

This defines a style asset called template.user which loads the file user.css from the template directory. This by itself is not enough, though. The template has to explicitly tell Joomla to load it. This happens, for example, in Cassiopeia's templates/cassiopeia/index.php file:

// Enable assets
$wa->usePreset('template.cassiopeia.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
    ->useStyle('template.active.language')
    ->registerAndUseStyle($assetColorName, 'global/' . $paramsColorName . '.css')
    ->useStyle('template.user')
    ->useScript('template.user')
    ->addInlineStyle(":root {
       --hue: 214;
       --template-bg-light: #f0f4fb;
       --template-text-dark: #495057;
       --template-text-light: #ffffff;
       --template-link-color: var(--link-color);
       --template-special-color: #001B4C;
       $fontStyles
    }");

The line I highlighted is where the template instructs Joomla to load that style asset.

Older templates not using Joomla 4 and later's Web Asset Manager had different style code for loading user customisation files. For example, this code is from Protostar in Joomla! 3.10:

<?php if (file_exists('templates/' . $this->template . '/css/user.css')) : ?>
    <link href="https://www.akeeba.com/<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/user.css" rel="stylesheet" />
<?php endif; ?>

I think that you need to first consult your template developer as to how the custom CSS file needs to be named, and where it needs to be placed. Then, make sure that the file is loaded, using your browser's dev tools. Only then you can start worrying about whether your rules are specific enough, or if you need to use !important.

In any case, this is already beyond the scope of our support. This is a general "how do I use Joomla to do X" kind of question. Also note that I am not a styling expert either. I can fake it pretty well with Bootstrap and some basic flexbox CSS, but I am not comfortable giving out CSS advice. I basically gave you a concise summary of what I could tell you on the subject.