/* These are the colors that the site uses*/
:root {
  --main-background: #121212;
  --nav-background: #202020;
  --main-text-color: #e0e0e0;

  --button-color: #00bcd4;
  --button-hover-color: #0097a7;
  --button-text:#e0e0e0; 
  
  --link-color: #00e5ff;
  --link-hover-color: #00bcd4;
  
  --header-color: #00e676;

  --highlight-background: #202020;
  --highlight-border: #444;

  --box-shadow: rgba(0, 0, 0, 0.2);

  --error-text: #aa0000;
  --error-background: #ffe5e5;
  --error-border: #ffaaaa;

  --input-background: #292929;
  --input-text: #e0e0e0; 
  --input-border: #333;
  --input-background-alt:#1e1e1e;

  --divider-line: #ccc;

  --hr-line: #444;
}


/*========================================================================================================*/



/* Setting site level, overall look. This includes headers, buttons, links, etc...  */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--main-background);
    color: var(--main-text-color);
    line-height: 1.6;
    padding: 0; 

    overflow: auto;
}

h1, h2, h3 {
    color: var(--header-color);
}

button {
    background-color: var(--button-color);
    color: var(--button-text);
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 10px;
}



button:hover {
  background-color: var(--button-hover-color);
  text-decoration: none;
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* links meant to look like buttons. Currently used in group detail.*/
.btn-link {
  display: inline-block;
  background-color: var(--button-color);
  color: var(--button-text);
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 1rem;
  font-weight: bold;
}


.btn-link:hover {
  background-color: var(--button-hover-color);
  text-decoration: none;
}

input {
  width: 100%;
  max-width: 300px;
  padding: 0.5rem;
  background-color: var(--input-background);
  color: var(--input-text);
  border: 1px solid var(--input-border);
  margin-top: 5px;
  margin-bottom: 5px;
}

hr {
  border: none;
  height: 3px;
  width: 60px;
  margin: 1.5rem auto 1.5rem 0;
  background-color: var(--hr-line);
  border-radius: 3px;
}

select {
    width: 100%;
    max-width: 300px;          /* match your input fields */
    padding: 0.5rem;
    background-color: var(--input-background);
    color: var(--input-text);
    border: 1px solid var(--input-border);
    border-radius: 6px;


    cursor: pointer;
}

/*========================================================================================================*/


/* Stuff for the top sidebar*/
nav {

  height: 60px; 
  max-height: 30%;
  width: 100%;
  position: fixed;
  background-color: var(--nav-background);
  padding: 1rem 2rem;
  box-shadow: 0 2px 4px var(--box-shadow);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
  padding: 0;
  margin: 0;
}

nav a {
  color: var(--link-color);
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

nav a:hover {
  color: var(--link-hover-color);
}

nav button {
  background: none;
  color: var(--link-color);
  padding: 0;
}

nav button:hover {
  color: var(--link-hover-color);
}

.nav-left ul,
.nav-right ul {
  display: flex;
  align-items: center;
}

/* Nav Hamburger Button */
.hamburger {
  font-size: 1.5rem;
  background: none;
  border: none;
  color: var(--link-color);
  cursor: pointer;
  margin-right: 1rem;
}


/*========================================================================================================*/


/* Nav Sidebar */
.sidebar {
  position: fixed;
  left: 0;
  top: 60px;
  height: calc(100% - 60px);
  width: 250px;
  background-color: var(--nav-background);
  padding: 1rem;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 1000;

  border-right: 2px solid var(--main-background);

}

.sidebar input[type="text"] {

    margin-bottom: 1rem;
    border-radius: 4px;

}

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

.sidebar li {
    margin-bottom: 0.5rem;
}


/* sidebar animation */
.sidebar.active {
  transform: translateX(0);
  transition: transform 0.3s ease;
}

/* Push content right when sidebar is active  
.main-container.sidebar-open .main-content {
  margin-left: 300px;
  transition: margin-left 0.3s ease;
}
*/


/*========================================================================================================*/

/* there is a block inside of main-content called dashboard_main. in theory, that should be renamed to something more clear, but for now uhhh I won't :)

/* This is everything under the top nav bar*/
.site-container {

    display: flex;
    min-height: calc(100vh - 64px); /* Full height minus nav height (adjust as needed) */
}

/* this is the container main-content is in (and is located inside of site-container)*/
.main-container {
    
    flex: 1;
    padding-top: 40px;
    padding-left: 1%;
    padding-right: 1%;
    gap: 1rem;
    border-radius: 10px 0 0 10px;
    overflow-y: auto;

    
    
}

/* this is where pretty much everything except for the nav bars are in!*/
.main-content {
    /*display: flex; 
    removing the comment marks and making display: flex will break the site for now. ideally, I would use this in the future though
    */
    overflow: auto;
    padding: 1rem 0;
    max-width: 100%;
    width: 100%;

    transition: margin-left 0.3s ease;

}


/*========================================================================================================*/


/* tracker detail stuff */

.tracker-image {
  width: 30%;
  height: auto;
}


.tracker-card {
    background-color: var(--highlight-background);
    border: 1px solid var(--highlight-border);    
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 0 10px var(--box-shadow);
}

.tracker-images-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5rem;
  margin-bottom: 2rem;
  height: 400px;
  padding: 1rem;
  background-color: var(--highlight-background);  
  border: 1px solid var(--highlight-border);     
  border-radius: 8px;
  margin: 0 auto;

  overflow: hidden;
}

.tracker-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
}

.tracker-label {
  align-self: flex-start;
  margin-bottom: 4px;
  font-weight: bold;
}

.tracker-text-columns-container {
  display: flex;
  gap: 3rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1rem auto;
}

/*========================================================================================================*/


/* group detail stuff */


/* Grid view (default) */
.group-tracker-grid.grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}


/* Make each tracker card stretch full width in list view */
.group-tracker-grid.list-view .tracker-card {
  width: 100%;
}

.group-tracker-grid.list-view {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* space between list items */
}

.group-tracker-grid.list-view .tracker-card {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  background-color: var(--highlight-background);
  border: 1px solid var(--highlight-border);    
  gap: 1.5rem;
}

/* Compact the text inside tracker-card */
.group-tracker-grid.list-view .tracker-card h3,
.group-tracker-grid.list-view .tracker-card p {
  margin: 0;
  white-space: nowrap;
}

/* Reduce heading size for compactness */
.group-tracker-grid.list-view .tracker-card h3 {
  font-size: 1rem;
}


/*========================================================================================================*/


/* admin user management stuff */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
  margin-top: 1rem;
  box-shadow: 0 0 10px var(--box-shadow);
}

.admin-table thead {
  background-color: var(--highlight-background);
  color: var(--main-text-color)
}

.admin-table th,
.admin-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--divider-line);
}


/*========================================================================================================*/


/* Login Page stuff */
.login-container, .add-tracker-container {
  max-width: 400px;
  margin: 4rem auto;
  padding: 2rem;
  background-color: var(--highlight-background);
  border: 1px solid var(--highlight-border);    
  border-radius: 12px;
  box-shadow: 0 4px 16px var(--box-shadow);
  font-family: sans-serif;
}

.login-container h1, .add-tracker-container h1 {
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 2rem;
}

.login-form p {
  margin-bottom: 1rem;
}

.login-form label, .add-tracker-form label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.login-form input[type="text"],
.login-form input[type="password"], .add-tracker-form input,
.add-tracker-form select,
.add-tracker-form textarea {

  box-sizing: border-box;
  
}



.form-errors {
  background-color: var(--error-background);
  border: 1px solid var(--error-border);
  color: var(--error-text);
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 8px;
}


/*========================================================================================================*/

.add-tracker-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}


.form-messages {
  background-color: var(--error-background);
  border: 1px solid var(--error-border);
  padding: 0.25rem;
  margin-bottom: 1rem;
  border-radius: 8px;
}

.form-message {
  margin: 0;
  color: var(--error-text);
}


/*FIX========================================================================================================*/


/* all the stuff for the welcome page... yes this is a lot for it */
.dashboard-welcome {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.welcome-card {
  background-color: var(--highlight-background);
  border: 1px solid var(--highlight-border);    
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 0 20px var(--box-shadow);
  max-width: 800px;
  width: 100%;
  text-align: left;
}

.welcome-card h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.welcome-card p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

.welcome-card ul {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.welcome-card li {
  margin-bottom: 0.5rem;
}


/*========================================================================================================*/


/* Stuff for the error pages */
.error-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100vh; 
    padding: 2rem;
}

.error-page h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    font-weight: bold;
}

.error-page p {
    font-size: 1.25rem;
    max-width: 800px;
}



/*========================================================================================================*/




.user-management-card {
  background-color: var(--highlight-background);
  border: 1px solid var(--highlight-border);    
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 0 10px var(--box-shadow);
  max-width: 600px;
  margin: 2rem auto;

}

.user-management-title {
  text-align: center;
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--divider-line);
}

.user-info-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--divider-line)
}

.user-info-table th,
.user-info-table td {
  padding: 0.75rem;
  text-align: left;
}

.user-update-form,
.user-delete-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}


.user-update-form input {
  padding: 0.6rem;
  border-radius: 5px;
}

.button-gap {
  margin-bottom: 1rem;
}