body {
  background-color: var(--color-dark-blue);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-light-blue);
}

/* Links */
a {
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--color-light-blue-darker);
  text-decoration: underline;
}

/* Buttons */
button.primary,
.btn-primary {
  background-color: var(--color-light-blue-darker);
  color: var(--color-white);
}

button.primary:hover,
.btn-primary:hover {
  background-color: var(--color-light-blue);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(74, 144, 226, 0.3);
}

button.secondary,
.btn-secondary {
  background-color: var(--color-dark-blue);
  color: var(--color-white);
}

button.secondary:hover,
.btn-secondary:hover {
  background-color: var(--color-dark-blue-darker);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(30, 58, 95, 0.3);
}

button.outline,
.btn-outline {
  background-color: transparent;
  color: var(--color-light-blue);
  border: 2px solid var(--color-light-blue);
}

button.outline:hover,
.btn-outline:hover {
  background-color: var(--color-light-blue);
  color: var(--color-white);
}

/* content and card */
.content {
    background-color: var(--color-dark-blue);
}

/* header */
.logo-container {
    background-color: var(--color-white);
    height: 84px;
    width: 100%
}

.logo {
    margin: 7px;
    height: 70px;
    padding-left: 80px;
}

.help-link {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.9rem;
    line-height: 1;
    transition: opacity 0.2s ease;
}

.help-link:hover,
.help-link:focus {
    opacity: 0.8;
    color: white;
}

.help-link:focus {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.settings-btn {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.settings-btn:hover,
.settings-btn:focus-visible {
    opacity: 0.8;
}

.settings-btn:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

textarea {
    overflow: hidden;
    resize: none;
}

.gridjs-table {
    table-layout: auto; /* Override GridJS's fixed layout */
    width: 100%;
}

.color-inherit {
    color: inherit;
}

.status-dot {
    width: 1rem;
    height: 1rem;
}