/* Repos Index and Show Page Styles */

/* ==========================================================================
   Repo Header (Show Page)
   ========================================================================== */

.repo-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 16px;
}

.repo-header__info h1 {
  margin-bottom: 4px;
}

.repo-header__info .text-muted {
  margin: 0;
}

.repo-header__actions {
  flex-shrink: 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn--primary {
  background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3);
}

.btn--primary:hover {
  background: linear-gradient(135deg, #0b5ed7 0%, #084298 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.4);
}

.btn--primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(13, 110, 253, 0.3);
}

/* Button inside form (button_to generates a form) */
.repo-header__actions form {
  display: inline;
}

.repo-header__actions form .btn {
  margin: 0;
}

/* Sync button spinner */
.btn--sync .btn__spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.btn--sync.is-loading .btn__spinner {
  display: inline-block;
}

.btn--sync.is-loading .btn__text {
  margin-left: 4px;
}

.btn--sync.is-loading {
  pointer-events: none;
  opacity: 0.8;
}

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

/* ==========================================================================
   Dashboard Summary Cards
   ========================================================================== */

.dashboard-summary {
  display: flex;
  gap: 16px;
  margin: 24px 0;
  flex-wrap: wrap;
}

.dashboard-card {
  padding: 20px 28px;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 12px;
  text-align: center;
  min-width: 130px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dashboard-card--warning {
  background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
  border: 1px solid #f5c2c7;
}

.dashboard-card--alert {
  background: linear-gradient(135deg, #fff8f3 0%, #ffede0 100%);
  border: 1px solid #ffc9a8;
}

.dashboard-card--caution {
  background: linear-gradient(135deg, #fffdf5 0%, #fff8e1 100%);
  border: 1px solid #ffe082;
}

.dashboard-card__value {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.dashboard-card__value--danger {
  color: #dc3545;
}

.dashboard-card__value--warning {
  color: #e65100;
}

.dashboard-card__label {
  color: #6c757d;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* ==========================================================================
   Filter Controls
   ========================================================================== */

.filter-controls {
  margin: 24px 0;
  padding: 16px 20px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 1px solid #e9ecef;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-btn {
  padding: 8px 16px;
  cursor: pointer;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  background: #fff;
  color: #495057;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.filter-btn:hover {
  background: #e9ecef;
  border-color: #ced4da;
}

.filter-btn.active {
  background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
  color: white;
  border-color: transparent;
  box-shadow: 0 2px 4px rgba(13, 110, 253, 0.3);
}

.filter-search {
  padding: 8px 14px;
  width: 220px;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 13px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.filter-search:focus {
  outline: none;
  border-color: #86b7fe;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

.filter-search::placeholder {
  color: #adb5bd;
}

.filter-separator {
  margin: 0 4px;
  color: #ced4da;
}

/* ==========================================================================
   Squad Sections
   ========================================================================== */

.squad-section {
  margin-bottom: 24px;
}

.squad-header {
  background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
  color: white;
  padding: 14px 20px;
  cursor: pointer;
  border-radius: 10px 10px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s ease;
  user-select: none;
}

.squad-header:hover {
  background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
}

.squad-header__link {
  color: white;
  text-decoration: none;
}

.squad-header__count {
  opacity: 0.6;
  margin-left: 12px;
  font-weight: 400;
  font-size: 14px;
}

/* ==========================================================================
   Repo Table
   ========================================================================== */

.repo-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e9ecef;
  border-top: none;
}

.repo-table thead {
  position: -webkit-sticky; /* Safari support */
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Ensure sticky header cells have opaque background to cover scrolling content */
.repo-table thead tr {
  background: #f1f3f4;
}

.repo-table {
  table-layout: fixed;
  width: 100%;
}

/* Column widths - must add up to 100% */
.repo-table th:nth-child(1) { width: 25%; } /* Repo */
.repo-table th:nth-child(2) { width: 10%; } /* Status */
.repo-table th:nth-child(3) { width: 12%; } /* Last Commit */
.repo-table th:nth-child(4) { width: 12%; } /* Ruby/Rails */
.repo-table th:nth-child(5) { width: 12%; } /* CVEs */
.repo-table th:nth-child(6) { width: 14%; } /* Last Synced */
.repo-table th:nth-child(7) { width: 15%; } /* Links */

.repo-table th {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #dee2e6;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  /* Override application.css table th styles and ensure sticky works */
  background: #f1f3f4 !important;
  background-color: #f1f3f4 !important;
  color: #495057 !important;
  border-radius: 0 !important;
  transition: background 0.15s ease;
}

.repo-table th:hover {
  background: #e4e7ea !important;
  background-color: #e4e7ea !important;
}

.repo-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}

.repo-table th.text-center,
.repo-table td.text-center {
  text-align: center;
}

/* Zebra striping */
.repo-row:nth-child(even) {
  background: #fff;
}

.repo-row:nth-child(odd) {
  background: #fafbfc;
}

.repo-row {
  transition: background 0.15s ease;
}

.repo-row:hover {
  background: #f0f7ff !important;
}

.repo-row--eol {
  border-left: 4px solid #dc3545;
}

.repo-row.hidden {
  display: none;
}

/* ==========================================================================
   Sort Indicators
   ========================================================================== */

.sort-indicator {
  margin-left: 4px;
  display: inline-block;
  transition: opacity 0.15s ease;
}

.sort-indicator::after {
  content: ' \2195'; /* ↕ */
  opacity: 0.3;
  font-size: 12px;
}

th.sort-asc .sort-indicator::after {
  content: ' \2191'; /* ↑ */
  opacity: 1;
  color: #0d6efd;
}

th.sort-desc .sort-indicator::after {
  content: ' \2193'; /* ↓ */
  opacity: 1;
  color: #0d6efd;
}

/* ==========================================================================
   Repo Info Cell
   ========================================================================== */

.repo-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0; /* Allow flexbox children to shrink below content size */
}

.repo-info__name {
  font-weight: 600;
  color: #2c3e50;
  transition: color 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.repo-info__name:hover {
  color: #0d6efd;
}

.repo-info__icon {
  width: 16px;
  height: 16px;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.repo-info__icon:hover {
  opacity: 1;
}

.repo-info__description {
  font-size: 12px;
  color: #6c757d;
  margin-top: 4px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   Technology Icons
   ========================================================================== */

.tech-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  opacity: 0.85;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.tech-icon:hover {
  opacity: 1;
  transform: scale(1.15);
}

.tech-icon svg {
  width: 100%;
  height: 100%;
}

.tech-icons {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-left: 8px;
}

.tech-icons--lg {
  gap: 10px;
  margin-left: 12px;
  vertical-align: middle;
}

/* ==========================================================================
   Version Display
   ========================================================================== */

.version-display {
  white-space: nowrap;
  font-size: 13px;
}

.version--eol {
  color: #dc3545;
  font-weight: 600;
}

.version--warning {
  color: #e65100;
  font-weight: 500;
}

.version__eol-icon {
  margin-left: 4px;
}

.version__eol-icon::after {
  content: ' \26A0'; /* ⚠ */
}

/* ==========================================================================
   Severity Badges
   ========================================================================== */

.severity-badge {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
  margin: 2px;
  color: #fff;
  letter-spacing: 0.3px;
}

.severity-badge--critical {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  box-shadow: 0 1px 3px rgba(220, 53, 69, 0.3);
}

.severity-badge--high {
  background: linear-gradient(135deg, #fd7e14 0%, #e76a00 100%);
  box-shadow: 0 1px 3px rgba(253, 126, 20, 0.3);
}

.severity-badge--medium {
  background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
  color: #212529;
  box-shadow: 0 1px 3px rgba(255, 193, 7, 0.3);
}

.severity-badge--low {
  background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
  box-shadow: 0 1px 3px rgba(40, 167, 69, 0.3);
}

.severity-badge--unknown {
  background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
  box-shadow: 0 1px 3px rgba(108, 117, 125, 0.3);
}

/* Larger badge variant for tables */
.severity-badge--lg {
  padding: 4px 10px;
  font-size: 12px;
}

/* ==========================================================================
   Status Badges
   ========================================================================== */

.status-badge {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
  color: #fff;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.status-badge--active {
  background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
  box-shadow: 0 1px 3px rgba(40, 167, 69, 0.3);
}

.status-badge--maintenance {
  background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
  box-shadow: 0 1px 3px rgba(23, 162, 184, 0.3);
}

.status-badge--inactive {
  background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
  box-shadow: 0 1px 3px rgba(108, 117, 125, 0.3);
}

.status-badge--deprecated {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  box-shadow: 0 1px 3px rgba(220, 53, 69, 0.3);
}

.status-badge--unknown {
  background: linear-gradient(135deg, #868e96 0%, #6c757d 100%);
  box-shadow: 0 1px 3px rgba(134, 142, 150, 0.3);
}

.status-badge__override {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #ffc107;
  border-radius: 50%;
  margin-left: 4px;
  vertical-align: middle;
}

.status-display {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.status-suggested {
  font-size: 10px;
  color: #6c757d;
  font-style: italic;
}

/* Status Selector (Show Page) */
.status-selector {
  margin-top: 8px;
}

.status-form {
  display: inline-block;
}

.status-select {
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  min-width: 150px;
}

.status-select:hover {
  border-color: #80bdff;
}

.status-select:focus {
  outline: none;
  border-color: #80bdff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* ==========================================================================
   Link Buttons
   ========================================================================== */

.link-buttons {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}

.link-btn {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  color: white;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.15s ease;
}

.link-btn:hover {
  transform: translateY(-1px);
  text-decoration: none;
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.link-btn--prod {
  background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
}

.link-btn--staging {
  background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
}

.link-btn--error {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

.link-btn--ci {
  background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
}

/* ==========================================================================
   Last Synced
   ========================================================================== */

.last-synced {
  font-size: 12px;
  color: #6c757d;
  font-weight: 500;
}

.last-synced--never {
  color: #adb5bd;
  font-style: italic;
}

/* Last Commit Display */
.last-commit {
  font-size: 12px;
  font-weight: 500;
}

.last-commit--active {
  color: #28a745;
}

.last-commit--maintenance {
  color: #17a2b8;
}

.last-commit--inactive {
  color: #6c757d;
}

.last-commit--unknown {
  color: #adb5bd;
  font-style: italic;
}

/* ==========================================================================
   Info Cards (Show Page)
   ========================================================================== */

.info-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 32px;
}

.info-card {
  flex: 1;
  min-width: 260px;
  border: 1px solid #e9ecef;
  padding: 20px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease;
}

.info-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.info-card__title {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  padding-bottom: 12px;
  border-bottom: 2px solid #f0f0f0;
}

.info-card--eol-warning {
  border: 1px solid #f5c2c7;
  background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
}

.info-card--eol-warning .info-card__title {
  color: #dc3545;
  border-bottom-color: #f5c2c7;
}

/* ==========================================================================
   EOL Alert Boxes
   ========================================================================== */

.eol-alert {
  margin-bottom: 12px;
  padding: 14px 16px;
  border-radius: 8px;
  border-left: 4px solid;
}

.eol-alert--danger {
  background: linear-gradient(135deg, #f8d7da 0%, #f5c2c7 100%);
  border-left-color: #dc3545;
}

.eol-alert--danger .eol-alert__message {
  color: #842029;
}

.eol-alert--warning {
  background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%);
  border-left-color: #ffc107;
}

.eol-alert--warning .eol-alert__message {
  color: #664d03;
}

.eol-alert__title {
  font-weight: 600;
  font-size: 14px;
}

.eol-alert__date {
  font-size: 12px;
  color: #6c757d;
  margin-top: 4px;
}

/* ==========================================================================
   Data Tables (Show Page)
   ========================================================================== */

.data-section {
  border: 1px solid #e9ecef;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 24px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.data-section__title {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

.data-section__subtitle {
  font-size: 14px;
  font-weight: normal;
  color: #6c757d;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
}

.data-table thead tr {
  background: #f8f9fa;
}

.data-table th {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #dee2e6;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  /* Override application.css table th styles */
  background: #f8f9fa !important;
  background-color: #f8f9fa !important;
  color: #495057 !important;
  border-radius: 0 !important;
}

.data-table td {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.data-table tbody tr {
  transition: background 0.15s ease;
}

.data-table tbody tr:hover {
  background: #f8f9fa;
}

.data-table--compact th,
.data-table--compact td {
  padding: 8px;
}

.data-table__small-text {
  font-size: 12px;
  color: #6c757d;
}

/* ==========================================================================
   Contributors List
   ========================================================================== */

.contributors-list {
  column-count: 3;
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.contributors-list li {
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f0;
  break-inside: avoid;
}

.contributors-list li:last-child {
  border-bottom: none;
}

.contributors-list a {
  color: #2c3e50;
  font-weight: 500;
  transition: color 0.15s ease;
}

.contributors-list a:hover {
  color: #0d6efd;
}

.contributors-list__permission {
  color: #adb5bd;
  font-size: 11px;
  font-weight: 500;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.text-muted {
  color: #6c757d;
}

.text-success {
  color: #198754;
  font-weight: 500;
}

.text-warning {
  color: #fd7e14;
  font-weight: 500;
}

.text-small {
  font-size: 12px;
}

.mt-10 {
  margin-top: 10px;
}

.mb-20 {
  margin-bottom: 20px;
}

/* Code styling */
code {
  background: #f1f3f4;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: #d63384;
}

/* Details/Summary styling */
details summary {
  cursor: pointer;
  color: #0d6efd;
  font-weight: 500;
  padding: 8px 0;
  transition: color 0.15s ease;
}

details summary:hover {
  color: #0a58ca;
}

details[open] summary {
  margin-bottom: 12px;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *


 */

 /*
 ** Colors: https://www.figma.com/file/5Vwjuf57gDOFCun53SHQ7m/?node-id=8502%3A107264
 ** Typography: https://www.figma.com/file/5Vwjuf57gDOFCun53SHQ7m/?node-id=8502%3A107265
 */

 :root {
   --white: 255, 255, 255;

   --red-900:  #A7140F;
   --red-700:  #D91E18;
   --red-500:  #EB0028;
   --red-300: #FCDBDC;
   --red-50:  #FFE9E9;

   --branding-500: #EB0028;

   --black-900: 18, 18, 18; /* #121212 */
   --black-700: #1D1D1D;
   --black-500:  #252323;

   --gray-900: #494949;
   --gray-700:  #555555;
   --gray-500:  #757575;
   --gray-300: #ECECEC;
   --gray-50: #F6F6F6;

   --notifications-green-500:  #26A65B;
   --notifications-green-300:  #E0F2E8;
   --notifications-yellow-500: #FEBF00;
   --notifications-yellow-50:  #FFF6D9;
   --notifications-red-700: #EB0028;
   --notifications-red-50:  #FFE9E9;

   --base-unit: 4px;
 }

 * {
   box-sizing: border-box;
 }

 html, body {
   font-family: 'Inter', sans-serif;
   color: rgb(var(--black-900));
   scroll-behavior: smooth;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

 ul {
   list-style: none;
   padding: 0;
 }

 img {
   display: block;
   width: 100%;
   height: auto;
 }

 button {
   outline: none;
   background: transparent;
   border: none;
   padding: 0.75rem 1rem;
   border-radius: var(--base-unit);
   transition: background-color 0.5s ease-in-out;
 }

 button:hover {
   cursor: pointer;
 }

 button:focus {
   outline: none;
   border: none;
 }

 .button-primary {
   color: rgb(var(--white));
   background: var(--red-500);
 }

 .button-primary:hover {
   background: var(--red-900);
 }

 .container {
   display: flex;
   width: 100%;
   max-width: 1400px;
   margin: auto;
   padding: 0 1rem;
 }

 .appbar {
   display: flex;
   width: 100%;
   height: 60px;
   color: rgb(var(--white));
   background: rgb(var(--black-900));
 }

 .appbar .container {
   justify-content: space-between;
   align-items: center;
 }

 .branding {
   display: flex;
   align-items: center;
 }

 .branding img {
   max-width: 5rem;
 }

 .app-name {
   margin-left: 0.5rem;
   white-space: nowrap;
 }

 .appbar-actions {
   display: flex;
 }

 .appbar-actions button {
   margin-right: 0.5rem;
 }

 .appbar-actions button:last-child {
   margin-right: 0;
 }

 .appbar .menu-button {
   color: rgb(var(--white));
 }

 .appbar .menu-button:hover {
   background: rgba(var(--white), 0.3);
 }

 main.container {
   flex-direction: column;
 }

 section {
   margin-bottom: 4rem;
 }

 .nav-panel {
   position: fixed;
   top: 0;
   transform: translateX(100vw);
   width: 300px;
   height: 100vh;
   z-index: 100;
   background: rgb(var(--white));
   box-shadow: -1px 0px 15px -1px rgba(0,0,0, 0.5);
   transition: all 0.5s ease-in-out;
 }

 .nav-panel.open {
  transform: translateX(calc(100vw - 300px));
 }

 .nav-panel header {
   display: flex;
   justify-content: end;
 }

 .nav-panel ul {
   padding: 0 1rem;
 }

 table th {
   color: var(--white);
   background-color: var(--red-500);
   padding: 0.5rem;
   border-radius: var(--base-unit);
 }

 table th a {
   color: rgb(var(--white));
 }