:root {
  --c-app-bg: #fff;
  --c-nav-bg: rgba(255, 255, 255, 0.89);
  --c-text: #000;
  --c-outline: #000;

  --c-hover: #f5f5f5;
  --c-table-row-hover: #f0f0f0;

  --c-default: #ccc;
  --c-default-hover: #bbb;

  --c-primary-text: #53ac0f;
  --c-primary: #569922;
  --c-primary-hover: #61ae27;
  --c-text-over-primary: #fff;

  --c-accent-text: #eeb016;
  --c-accent: #e1ab22;
  --c-accent-hover: #e1b23b;
  --c-text-over-accent: #fff;

  --c-success: var(--c-primary);
  --c-text-over-success: var(--c-text-over-primary);
  --c-error: #fae6e6;
  --c-error-hover: #f9c0c0;
  --c-text-over-error: #000;
  --c-error-text: red;
  --c-error-text-hover: darkred;

  --c-input-bg: transparent;
  --c-border: #ccc;

  --radii-sm: 0.6em;
  --radii: 0.9em;

  --s-3xs: 0.2em;
  --s-2xs: 0.3em;
  --s-xs: 0.5em;
  --s-sm: 0.75em;
  --s-md: 0.875em;
  --s-lg: 1em;
  --s-xl: 1.25em;
  --s-2xl: 1.5em;
  --s-3xl: 3em;
  --s-4xl: 4em;

  --fs-xs: 0.75em;
  --fs-sm: 0.875em;
  --fs-md: 1em;
  --fs-lg: 1.25em;
  --fs-xl: 1.5em;
  --fs-2xl: 2em;

  --form-input-height: 2.6em;
  --navbar-height: 3.5em;
  --container-top-offset: 2.5em;
  --container-bottom-offset: 3em;
}

[data-theme="dark"] {
  --c-app-bg: #111;
  --c-nav-bg: rgba(17, 17, 17, 0.89);
  --c-text: #fff;
  --c-outline: #fff;

  --c-hover: #222;
  --c-table-row-hover: #2e2e2e;

  --c-default: #555;
  --c-default-hover: #666;

  --c-primary-text: #61ae27;
  --c-primary: #335b14;
  --c-primary-hover: #4a851d;
  --c-text-over-primary: #fff;

  --c-accent-text: #e1ab22;
  --c-accent: #913d25;
  --c-accent-hover: #a5452b;
  --c-text-over-accent: #fff;

  --c-success: var(--c-primary);
  --c-text-over-success: var(--c-text-over-primary);
  --c-error: #9b0707;
  --c-error-hover: #b60a0a;
  --c-error-text: red;
  --c-error-text-hover: darkred;
  --c-text-over-error: #fff;

  --c-input-bg: transparent;
  --c-border: #555;
}

@media (max-width: 980px) {
  :root {
    --container-top-offset: 1em;
    --container-bottom-offset: 2em;
  }
}

/* Global styles */

html {
  height: 100%;
}

body {
  background-color: var(--c-app-bg);
  color: var(--c-text);
  font-size: clamp(
    0.9375rem,
    0.8vw + 0.6rem,
    1.125rem
  ); /* Fluid typography between 15px and 18px. */
  font-family: system-ui, sans-serif;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Brand styles */

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-2xs);
  font-size: var(--fs-lg);
  font-weight: 800;
  margin: 0;
  white-space: nowrap;
  text-decoration: none;
  color: var(--c-text);
  border-radius: var(--radii-sm);
  padding-right: var(--s-xs);
}

.brand .icon {
  font-size: var(--fs-xl);
  width: 1.4em;
  height: 1.4em;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 600px) {
  .brand {
    padding-inline: var(--s-2xs);
  }
  .brand .label {
    display: none;
  }
}

.brand:focus {
  outline: 2px solid var(--c-outline);
}

/* Card styles */

.card {
  border: 1px solid var(--c-border);
  border-radius: var(--radii);
  overflow: hidden;
}

/* Page header and actions styles */

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-lg);
  margin-bottom: var(--s-2xl);
}

.page-header-main {
  display: flex;
  align-items: center;
  gap: var(--s-lg);
  min-width: 0;
}

.page-header-actions,
.form-actions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--s-xs);
}

.page-header-actions {
  justify-content: flex-end;
}

.form-actions {
  justify-content: flex-start;
}

.form-actions {
  margin-top: var(--s-md);
}

@media (max-width: 600px) {
  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-md);
  }

  .page-header-actions,
  .form-actions {
    justify-content: flex-start;
  }
}

/* Button styles */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radii-sm);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  color: var(--c-text);
  background: transparent;
  border: 1px solid transparent;
  padding: 0;
  margin: 0;
  white-space: nowrap;
}

.btn:disabled {
  filter: grayscale(100%) opacity(70%);
  cursor: not-allowed;
}

.btn-primary {
  color: var(--c-text-over-primary);
  background-color: var(--c-primary);
}

.btn-primary:focus {
  outline: 2px solid var(--c-outline);
}

.btn-primary:hover {
  background-color: var(--c-primary-hover);
}

.btn-primary.btn-ghost {
  background: transparent;
  color: var(--c-primary-text);
}

.btn-primary.btn-ghost:hover {
  background: var(--c-primary);
  color: var(--c-text-over-primary);
}

.btn-primary.btn-outline {
  background: transparent;
  border: 1px solid var(--c-primary);
  color: var(--c-primary-text);
}

.btn-primary.btn-outline:hover {
  background: var(--c-primary);
  color: var(--c-text-over-primary);
}

.btn-accent {
  color: var(--c-text);
  background-color: var(--c-accent);
}

.btn-accent:focus {
  outline: 2px solid var(--c-outline);
}

.btn-accent:hover {
  background-color: var(--c-accent-hover);
}

.btn-accent.btn-ghost {
  background: transparent;
  color: var(--c-accent-text);
}

.btn-accent.btn-ghost:hover {
  background: var(--c-accent);
  color: var(--c-text-over-accent);
}

.btn-accent.btn-outline {
  background: transparent;
  border: 1px solid var(--c-accent);
  color: var(--c-accent-text);
}

.btn-accent.btn-outline:hover {
  background: var(--c-accent);
  color: var(--c-text-over-accent);
}

.btn-default {
  background-color: var(--c-default);
  color: var(--c-text);
}

.btn-default:focus {
  outline: 2px solid var(--c-outline);
}

.btn-default:hover {
  background-color: var(--c-default-hover);
}

.btn-default.btn-ghost {
  background: transparent;
  color: var(--c-text);
}

.btn-default.btn-ghost:hover {
  background: var(--c-default);
  color: var(--c-text);
}

.btn-default.btn-outline {
  background: transparent;
  border: 1px solid var(--c-default);
  color: var(--c-text);
}

.btn-default.btn-outline:hover {
  background: var(--c-default);
  color: var(--c-text);
}

.btn-danger {
  background-color: var(--c-error);
  color: var(--c-text-over-error);
}

.btn-danger.btn-ghost {
  background: transparent;
  color: var(--c-error-text);
}

.btn-danger.btn-ghost:hover {
  background: var(--c-error);
  color: var(--c-text-over-error);
}

.btn-danger:focus {
  outline: 2px solid var(--c-outline);
}

.btn-danger:hover {
  background-color: var(--c-error-hover);
  color: var(--c-text-over-error);
}

.btn-danger.btn-outline {
  background: transparent;
  border: 1px solid var(--c-error);
  color: var(--c-error-text);
}

.btn-danger.btn-outline:hover {
  background: var(--c-error);
  color: var(--c-text-over-error);
}

.btn,
.btn-md {
  padding: var(--s-sm) var(--s-md);
  max-height: 2.6em;
}

.btn.btn-icon,
.btn-md.btn-icon {
  padding: var(--s-2xs);
  width: 2.6em;
  height: 2.6em;
}

.btn-sm {
  font-size: var(--fs-sm);
  padding: var(--s-xs) var(--s-xs);
  max-height: 2.4em;
}

.btn-sm.btn-icon {
  padding: var(--s-2xs);
  width: 2.4em;
  height: 2.4em;
}

.btn-rounded {
  border-radius: 30px;
}

/* Form styles */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
}

.form .label {
  display: flex;
  flex-direction: column;
  gap: var(--s-2xs);
}
.form .label .label-text {
  font-size: var(--fs-sm);
  font-weight: 500;
}

.form .input {
  width: 100%;
  height: var(--form-input-height, 2.6em);
  padding: var(--s-sm);
  border-radius: var(--radii-sm);
  background: var(--c-input-bg);
  border: 2px solid var(--c-border);
  outline: none;
  color: var(--c-text);
}
.form .input:active,
.form .input:focus {
  border: 1px solid transparent;
  outline: 2px solid var(--c-outline);
}

.form .form-error {
  background: var(--c-error);
  color: var(--c-text-over-error);
  padding: var(--s-xs) var(--s-sm);
  border-radius: var(--radii-sm);
}

.form .field-error {
  color: var(--c-error-text);
  font-size: var(--fs-xs);
}

.form .input-error {
  border-color: var(--c-error);
}

.form .label-hint {
  font-size: var(--fs-xs);
  color: var(--c-text);
  opacity: 0.7;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-sm);
  border: 1px solid var(--c-border);
  border-radius: var(--radii-sm);
  padding: var(--s-xl);
  color: var(--c-text);
}

.empty-state-title {
  margin: 0;
  font-weight: 800;
}

.empty-state-description {
  margin: 0;
  max-width: 58ch;
  opacity: 0.72;
}

.empty-state-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs);
  margin-top: var(--s-xs);
}

.form .password-input-wrapper {
  position: relative;
}

.form .toggle-password-visibility {
  cursor: pointer;
  position: absolute;
  right: var(--s-sm);
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-text);
}

/* Navbar styles */

.top-bar {
  position: sticky;
  display: flex;
  background: var(--c-nav-bg);
  z-index: 100;
  align-items: center;
  justify-content: space-between;
  top: 0;
  left: 0;
  right: 0;
  padding: var(--s-sm) var(--s-lg);
  height: var(--navbar-height);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-xs);
}

.nav .nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text);
  text-decoration: none;
  background: transparent;
  padding: var(--s-xs) var(--s-sm);
  border-radius: var(--radii-sm);
  border: none;
  cursor: pointer;
  font-weight: 800;
}

@media (max-width: 600px) {
  .nav .nav-item {
    padding: var(--s-3xs) var(--s-xs);
  }
}

.nav .nav-item:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-style: wavy;
  text-decoration-thickness: 2px;
}

.nav .nav-item:focus {
  outline: none;
  color: var(--c-text);
  outline: 2px solid var(--c-outline);
}

.nav .nav-item.theme-toggle {
  padding: var(--s-xs);
}

[data-theme="dark"] .nav .dark {
  display: none;
}
[data-theme="light"] .nav .light {
  display: none;
}

/* Auth styles */

.auth {
  padding: var(--s-md);
}

.auth .container {
  --container-width: 480px;

  width: var(--container-width);
  margin: var(--container-top-offset) auto 0;
  padding: var(--s-md) var(--s-md) var(--container-bottom-offset);
}

@media (max-width: 480px) {
  .auth .container {
    width: 100%;
  }
}

.auth .form {
  border-radius: var(--radii);
}

@media (max-width: 600px) {
  .auth .form {
    width: 100%;
  }
}

.auth .title {
  font-size: var(--fs-2xl);
  margin-bottom: var(--s-lg);
}

.auth .footer {
  margin-top: var(--s-md);
  font-size: var(--fs-sm);
}

/* Messages styles */

.message {
  position: fixed;
  z-index: 200;
  top: calc(var(--s-2xl) + 1em);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--s-xs);
  padding: var(--s-sm);
  border-radius: var(--radii);
  background: transparent;
  min-width: 300px;
}

.message [class^="icon-"] {
  width: 1.6em;
  height: 1.6em;
  flex-shrink: 0;
}

.message-main {
  margin-bottom: var(--s-sm);
}

.message-success {
  background: var(--c-success);
  color: var(--c-text-over-success);
}

.message-error {
  background: var(--c-error);
  color: var(--c-text-over-error);
}

.message-close {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-self: flex-end;
  margin-left: var(--s-2xl);
}

.message-text {
  flex: 1;
}

/* Table styles */

.table {
  width: 100%;
  border-collapse: collapse;
}

.table thead {
  border-bottom: 2px solid var(--c-border);
  text-transform: uppercase;
  font-size: var(--fs-xs);
}

.table th,
.table td {
  max-width: 250px;
  min-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 1px solid var(--c-border);
  border-right: 1px solid var(--c-border);
}

.table th:first-child,
.table td:first-child {
  border-left: none;
}

.table th:last-child,
.table td:last-child {
  border-right: none;
}

.table th {
  text-align: left;
  padding: var(--s-md) var(--s-lg);
}

.table td {
  text-align: left;
  padding: var(--s-xs) var(--s-md);
  white-space: nowrap;
}

.table tbody tr[data-url] {
  cursor: pointer;
}

.table tbody tr[data-url]:hover {
  background: var(--c-table-row-hover);
}

.table tbody tr:not(:last-child) {
  border-bottom: 1px solid var(--c-border);
}

.table .actions {
  display: flex;
  gap: var(--s-xs);
}

.table-scroll {
  overflow-x: auto;
}

.submissions-table .actions-column,
.submissions-table .actions-cell {
  position: sticky;
  right: 0;
  border-left-color: transparent;
  min-width: 4.25em;
  width: 4.25em;
  text-align: center;
}

.submissions-table .submitted-at-column,
.submissions-table .submitted-at-cell {
  min-width: 11em;
}

.submissions-table .actions-column {
  z-index: 2;
  background: var(--c-app-bg);
}

.submissions-table .actions-cell {
  z-index: 1;
  background: var(--c-app-bg);
}

.table-striped tbody tr:nth-child(odd) .actions-cell {
  background: var(--c-hover);
}

.table tbody tr[data-url]:hover .actions-cell {
  background: var(--c-table-row-hover);
}

.submissions-table .actions-column::before,
.submissions-table .actions-cell::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--c-border);
  pointer-events: none;
}

.table-striped tbody tr:nth-child(odd) {
  background: var(--c-hover);
}

.table .submission-meta form {
  width: fit-content;
  margin-inline: auto;
}

.submissions-table .delete-btn {
  color: var(--c-error-text);
  background: transparent;
}

.submissions-table .delete-btn:hover,
.submissions-table .delete-btn:focus {
  background: var(--c-error);
  color: var(--c-text-over-error);
}

/* Code block styles */

.code {
  margin-top: var(--s-3xl);
  margin-bottom: var(--s-xl);
  margin-inline: var(--s-md);
  padding: var(--s-lg);
  border-radius: var(--radii);
  max-width: calc(100vw - var(--s-md) * 2);
  overflow-x: auto;
  box-sizing: border-box;
  background-color: transparent;
}

syntax-highlight {
  text-shadow: none !important;
  /* text-shadow: 0 1px var(--c-text-shadow) !important; */
}

syntax-highlight:focus {
  outline: 2px solid var(--c-outline);
}

/* Breadcrumbs */

.breadcrumbs {
  position: sticky;
  top: var(--navbar-height);
  left: 0;
  padding: var(--s-sm) var(--s-xl);
  margin-bottom: var(--s-2xl);
  background: var(--c-nav-bg);
}

@media (max-width: 600px) {
  .breadcrumbs {
    padding: var(--s-lg) var(--s-xl) var(--s-xs);
    margin-bottom: var(--s-sm);
  }
}

.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3xs);
  padding: 0;
  margin: 0;
  font-size: var(--fs-sm);
}

.breadcrumbs li {
  display: flex;
  align-items: center;
}

.breadcrumbs li + li::before {
  content: "/";
  margin-right: var(--s-3xs);
  color: var(--c-border);
}

.breadcrumbs a {
  color: var(--c-primary-text);
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.breadcrumbs span[aria-current="page"] {
  color: var(--c-text);
  opacity: 0.55;
}