/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

 /* 全体 */
:root {
  --button-border-color: black;
  --button-background-color: white;
  --button-text-color: black;
  --button-hover-color: lightgray;

  --border-color: black;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
}

/* スペーサー */
.spacer {
  width: 1rem;
  height: 1rem;
}
.spacer-inline {
  display: inline-block;
  width: 1rem;
  height: 1rem;
}

/* フォーム */
dl.field {
  margin: 1rem 0;

  dt,
  dd {
    display: inline-block;
  }
  dt {
    width: 8rem;
    padding-right: 1rem;
    text-align: right;
  }
  dd {
    input[type="text"] {
      width: 20rem;
      padding: 0.2rem;
    }
  }
}
input[type="checkbox"] {
  margin-right: 0.5rem;
}

/* 検索オプション */
.options {
  margin: 1rem 0;

  select {
    margin-right: 0.5rem;
    padding: 0.2rem;
    text-align: right;
  }
}

/* ラジオボタン */
.radio {
  margin: 1rem 0;

  label {
    margin-left: 0.2rem;
    margin-right: 1rem;
  }
}

/* ボタン */
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  /* width: 5rem; */
  text-align: center;
  color: var(--button-text-color);
  background-color: var(--button-background-color);
  border: 1px solid var(--button-border-color);
  border-radius: 0.5rem;
  text-decoration: none;

  &:hover {
    background-color: var(--button-hover-color);
  }
}

/* テーブル */
table {
  border-collapse: collapse;
}

/* UR-DBMS */
table.ur-result {
  th,
  td {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
  }
  .number {
    text-align: right;
  }
}

/* 疾患 */
table.disorder {
  th,
  td {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
  }
  th {
    text-align: right;
  }
}

/* Syndrome Finder */
table.sf-result {
  th,
  td {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
  }
  .number {
    text-align: right;
  }
}