/* This is static/css/styles.css */
form > * {
    display: block;
    margin: 5px 5px 5px 5px;
    font-size: large;
}

/* Additional styles for your site can go here */
/* Define default (light mode) colors */
:root {
    --background-color: #ffffff;
    --text-color: #000000;
    --error-color: #da3b3b;
    font-size: large;
    /* ... other color variables */
}

/* Dark mode colors */
[data-theme="dark"] {
    --background-color: #121212;
    --text-color: #ffffff;
    --error-color: #feb4b4;
    /* ... other color variables */
}

.error-message {
  color: var(--error-color);
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    /* Apply other variables as needed */
}

/* For div class="timestamp" */
.timestamp {
    font-size: smaller;
    color: #666666;
}

/* For the login input form */
#loginForm input[type="text"], #loginForm input[type="password"] {
    font-size: 1.5em; /* Makes the text larger */
    width: 30%; /* Makes the input stretch to the full width of its container */
    box-sizing: border-box; /* Ensures padding doesn't affect the overall width */
}

/* For the weight input form */
#weightForm input[type="number"] {
  font-size: 3em; /* Makes the text larger */
  text-align: center; /* Centers the text */
  width: 60%; /* Makes the input stretch to the full width of its container */
  box-sizing: border-box; /* Ensures padding doesn't affect the overall width */
}

#weightForm button, #loginForm button {
  font-size: 1.0em; /* Larger button text */
  padding: 0.5em 1em; /* Larger button padding */
  width: 50%; /* Full width */
  box-sizing: border-box; /* Ensures padding doesn't affect the overall width */
}

.leaderboard_area {
  margin: 0 auto;
  width: 75%;
  padding: 10px 0px 0px 0px;
  border: 2px solid #666666;
  border-radius: 5px;
}

/* Right-align numeric values in the table */
.numeric {
  text-align: right;
}

table {
  font-family: "Cabin Sketch", cursive;
  font-size: 1.0em;
  font-weight: 800;
}

.t-heading {
  font-family: "Cabin Sketch", cursive;
  font-size: 1.2em;
  font-weight: 500;
  text-align: center;
}

.t-heading .small {
  font-size: 1.1em;
  font-weight: 500;
}

/* Dark mode colors */
[data-theme="dark"] .bi {
  color: #ffffff;
}

.wc_up {
  color: #ae2f2f;
}

.wc_down {
  color: #0f850f;
}

/* Dark mode colors */
[data-theme="dark"] .wc_up {
  color: #dc5959;
}

/* Dark mode colors */
[data-theme="dark"] .wc_down {
  color: #22c522;
}

.dashboard_stack {
  width: 65%;
  display: flex;
  flex-direction: row; /* stack flex items horizontally by default */
  align-items: center;
  justify-content: center;
}

.dashboard_unstack {
  width: 100%;
  display: flex;
  flex-direction: column; /* stack flex items horizontally by default */
  align-items: center;
  justify-content: center;
}

.dash_stack_item {
  flex: 1; /* each item will be the same width */
  margin: 0px; /* add some spacing between items */
}

.dash_stack_item:first-child {
  order: 2; /* move the first item to the end */
}

.dash_stack_item:last-child {
  order: 1; /* move the first item to the end */
}

.recent_weight {
  font-family: "Cabin Sketch", cursive;
  font-size: 4em;
  font-weight: 500;
  margin: 0px;
  line-height: 1em;
}

.recent_weight_text {
  font-family: "Cabin Sketch", cursive;
  font-size: 1em;
  font-weight: 500;
  margin: 0 auto;
}

@media (max-width: 928px) {
    form > * {
      font-size: larger; /* This increases the font size on smaller screens */
    }
    .dashboard_stack {
      flex-direction: column; /* stack flex items vertically on smaller screens */
      justify-content: space-between;
      width: 100%;
    }
    .dash_stack_item {
      flex: 1; /* each item will be the same width */
      margin: 0px; /* add some spacing between items */
    }
    .dash_stack_item:first-child {
      order: 1; /* move the first item to the end */
    }
    .dash_stack_item:last-child {
      order: 2; /* move the first item to the end */
    }
    .dashboard_unstack {
      flex-direction: row; /* stack flex items vertically on smaller screens */
      justify-content: space-between;
      width: 100%;
    }
    .recent_weight {
      font-size: 2em;
      margin: 10px;
    }
    /* For phone-sized screens, make the labels and inputs full width */
    form > label, form > input {
      display: block;
      width: 85%;
      margin: 5px 5px 5px 5px;
      font-size: larger;
    }
    button {
      width: 75%;
      margin: 5px 5px 5px 5px;
      font-size: larger;
    }
    img {
        width: 50%;
        margin: 5px 5px 5px 5px;
    }
    #loginForm input[type="text"], #loginForm input[type="password"] {
      font-size: 2.5em; /* Makes the text larger */
      width: 75%; /* Makes the input stretch to the full width of its container */
      box-sizing: border-box; /* Ensures padding doesn't affect the overall width */
    }
    #weightForm input[type="number"] {
      width: 50%;
      font-size: 3em; /* Larger button text */
      box-sizing: border-box; /* Ensures padding doesn't affect the overall width */
    }
    #weightForm button, #loginForm button {
      width: 40%;
      font-size: 1.5em; /* Makes the text larger */
      box-sizing: border-box; /* Ensures padding doesn't affect the overall width */
    }
    .no-mobile {
      display: none;
    }
    .leaderboard_area {
      margin: 0 auto;
      width: 98%;
      padding: 10px 0px 0px 0px;
      border: 2px solid #666666;
      border-radius: 5px;
    }
    table {
      font-family: "Cabin Sketch", cursive;
      font-size: 0.9em;
      font-weight: 500;
    }
    
    .t-heading {
      font-family: "Cabin Sketch", cursive;
      font-size: 1.1em;
      font-weight: 500;
      text-align: center;
      background-color: var(--bs-table-striped-bg);
    }
    
    .t-heading .small {
      font-size: 0.9em;
      font-weight: 500;
    }
    /* Add more styles for smaller screens */
  }

  @media (max-width: 721px) {
    .no-mobile-portrait {
      display: none;
    }
  }

.edit-timestamp {
    color: #666666;
    text-decoration: none;
    margin-left: 5px;
    cursor: pointer;
}

.edit-timestamp:hover {
    color: #333333;
}

[data-theme="dark"] .edit-timestamp {
    color: #999999;
}

[data-theme="dark"] .edit-timestamp:hover {
    color: #ffffff;
}