/* ==========================================================================
   REUSABLE UTILITIES
   ========================================================================== */

/* ---------- Responsive & Visibility ---------- */
.mobile-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.desktop-only {
  display: none !important;
}

.collapsible-group {
  display: none;
}

.collapsible-group.show-mobile {
  display: flex;
}

@media (min-width: 940px) {
  .desktop-only {
    display: flex !important;
  }

  .mobile-only {
    display: none !important;
  }

  .collapsible-group {
    display: flex !important;
    align-items: center;
    gap: 4px;
  }
}

/* ---------- Text & Whitespace Formatting ---------- */
.pre-wrap {
  white-space: pre-wrap;
}

.no-pre,
.raw_html,
.info2,
.cmd_output {
  white-space: normal;
}

.membership {
  white-space: pre-line;
}

/* ---------- Semantic Status & Color Helpers ---------- */
.err,
.error {
  color: var(--color-error);
}

.error {
  margin-left: 5px;
}

.nutral {
  color: var(--color-neutral);
}

.warn {
  color: var(--color-warning);
}

.important {
  color: var(--color-important);
}

.info {
  color: var(--terminal-output);
}

.links,
.output {
  color: #05CDE5;
}

.resp {
  color: var(--color-text);
}

/* ---------- File Badges & Extensions ---------- */
.file-txt {
  color: #00ffff;
}

.file-md {
  color: #ffaa00;
}

.file-css {
  color: #00DDFF;
}

.file-json {
  color: #ffff00;
}

.fa-file-zipper {
  color: #888888;
}

.file-js {
  color: #f7df1e;
}

.file-pdf {
  color: #ff4444;
}

.file-html {
  color: #66ccff;
}

.file-env {
  color: #ff00ff;
}

.file-db {
  color: #00ff00;
}

.file-cfg {
  color: #00ffcc;
}

.file-key {
  color: #ff4444;
}

.file-enc {
  color: #888888;
}

.file-default {
  color: #00ff00;
}

/* ---------- Reusable Animations ---------- */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}