/*
 * 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.
 */

 /* define var max-width */
:root {
   --max-width: 50rem;
}

html {
   background-color: black;
   color: white;
   font-family: ExpoArabic, helvetica, sans-serif;
}

img#logo {
   width: 5rem;
   height: 5rem;
}

form {
   width: 100%;
   max-width: var(--max-width);
   form-field {
      display: grid;
      margin-bottom: 1rem;
   }
   form-actions {
      display: grid;
      margin-top: 2rem;
      /* color: red important!; */
      /* font-size: 3rem; */
   }
}

header {
   padding: 20px 0;
   text-align: center;
   margin-bottom: 20px;
   /* a grid with 3 cols */
   display: grid;
   grid-template-columns: 5rem 1fr 1fr 1fr 1fr 5rem;
   gap: 1rem;
   button, a {
      height: 5rem;
      border: none;
   }
   max-width: var(--max-width);
   /* center this */
   margin: 0 auto;
   button:hover,
   a:hover {
      box-shadow: 0 4px 0 white;
      color: white;
   }
}

main {
   display: flex;
   flex-direction: column;
   align-items: center;
   /* justify-content: center; */
   height: 100vh;
   color: white;
}

user-list {
   display: grid;
   width: 100%;
   max-width: var(--max-width);
   padding: 1rem;
   /* vertical center for grid cell contents */
   user-list-item {
      width: 100%;
      display: grid;
      grid-template-columns: auto 10rem 5rem 2rem 2rem 2rem;
      gap: 0.5rem;
      padding-bottom: 1rem;
      & {
         align-items: center;
      }
      .admin {
         color: red;
      }
      .user {
         color: lightgreen;
      }
      action * {
         height: 1rem;
      }
      action form {
         display: contents;
      }
      &.header {
         font-weight: bold;
         text-decoration: underline;
         /* color: white; */
      }
   }
}

tag {
   background-color: lightgreen;
   color: black;
   /* color: white; */
   padding: 0.5rem;
   border-radius: 0.5rem;
   margin-right: 0.5rem;
}

bucket-list {
   display: grid;
   width: 100%;
   max-width: var(--max-width);
   padding: 1rem;

   bucket-list-item {
      /* color: lightgreen; */
      width: 100%;
      display: grid;
      grid-template-columns: auto 15rem 10rem 10rem 2rem 2rem;
      gap: 0.5rem;
      padding-bottom: 1rem;
      & {
         align-items: center;
      }
      action * {
         height: 1rem;
      }
      action form {
         display: contents;
      }
      &.header {
         font-weight: bold;
         text-decoration: underline;
         /* color: white; */
      }
   }
}

log-list {
   display: grid;
   width: 100%;
   max-width: var(--max-width);
   padding: 1rem;

   log-list-item {
      width: 100%;
      display: grid;
      grid-template-columns: 15rem 15rem 10rem 1fr;
      gap: 0.5rem;
      padding-bottom: 1rem;
      & {
         align-items: start;
      }
      &.header {
         font-weight: bold;
         text-decoration: underline;
      }
      pre {
         margin: 0;
         white-space: pre-wrap;
         word-break: break-all;
      }
   }

   log-list-details {
      width: 100%;
      padding-bottom: 1rem;
      padding-left: 1rem;
   }
}

upload-list {
   display: grid;
   width: 100%;
   padding: 1rem;

   upload-list-item {
      width: 100%;
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      gap: 0.5rem;
      padding-bottom: 1rem;
      & {
         align-items: center;
      }
      &.header {
         font-weight: bold;
         text-decoration: underline;
      }
      .complete {
         color: lightgreen;
      }
      .in-progress {
         color: orange;
      }
      .unknown {
         color: red;
      }
   }
}

/* style buttons and links similar like flat buttons */
button,
a,
input[type="submit"] {
   display: inline-flex;
   /* Use inline-flex to keep the inline-block behavior */
   align-items: center;
   /* Vertically center the text */
   justify-content: center;
   /* Horizontally center the text */
   padding: 0.5rem 1rem;
   border: 2px solid white;
   padding: 1rem;
   background-color: black;
   color: white;
   text-align: center;
   text-decoration: none;
   cursor: pointer;
   transition: background-color 0.2s;
   box-sizing: border-box;
   /* Ensure both elements have the same box-sizing */
   width: 100%;
   /* height: 1rem; */
   /* Ensure both elements take the full width of the grid cell */
   /* Set a fixed height for both elements */
   font-size: medium;
   max-width: 20rem;
}

button:hover,
a:hover,
input[type="submit"]:hover {
   box-shadow: 0 4px 0 white;
   color: white;
}

/* style input fields and selects similar to above flat style */
input,
select {
   padding: 0.5rem 1rem;
   border: 1px solid #333;
   background-color: white;
   color: #333;
   width: 100%;
   box-sizing: border-box;
   /* Ensure consistent box-sizing */
}

#fileInput {
   width: 100%;
   /* Ensure it takes the full width */
   box-sizing: border-box;
   /* Ensure consistent box-sizing */
   height: 5rem;
}

upload-form {
   /* flex with rows */
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   width: 100%;
   max-width: var(--max-width);
}

upload-form label {
  display: block;
  width: 100%;
  padding: 2rem;
  border: 2px dashed white;
  text-align: center;
  cursor: pointer;
  color: white;
  background-color: black;
  box-sizing: border-box;
  transition: background-color 0.3s, border-color 0.3s;
}

upload-form label:hover,
upload-form label.dragover {
  background-color: #333;
  border-color: #00aaff;
}

progress {
   width: 100%;
   max-width: var(--max-width);
}

.mt {
   margin-top: 1rem;
 }

 .center {
   text-align: center;
   margin-left: auto;
   margin-right: auto;
 }

 progress#uploadProgress {
   width: 100%;
   height: 30px;
   margin-top: 10px;
   margin-bottom: 10px;
 }

 progress.upload-complete {
  accent-color: green;
}

 .uploadStatusDetails {
   padding-top: 1rem;
   progress {
      margin-bottom: 1rem;
   }
 }

.upload-file-details {
   margin-top: 0.75rem;
}

.upload-progress-meta {
   margin-top: -0.5rem;
   margin-bottom: 1rem;
   color: #c7c7c7;
   font-size: 0.95rem;
}

 flash {
   display: block;
   padding: 1rem;
   background-color: #333;
   color: white;
   text-align: center;
   margin-top: 1rem;
 }

flash.alert {
   background-color: red;
}
flash.notice {
   background-color: lightblue;
   color: black;
}

/* User filter styles */
#userFilter {
   width: 100%;
   max-width: 300px;
   padding: 0.5rem;
   border: 1px solid #333;
   background-color: white;
   color: black;
   border-radius: 3px;
   font-size: medium;
   transition: border-color 0.2s;
}

#userFilter:focus {
   outline: none;
   border-color: #00aaff;
   box-shadow: 0 0 0 2px rgba(0, 170, 255, 0.2);
}

#userFilter::placeholder {
   color: #666;
}

/* Smooth transition for filtered items */
user-list-item {
   transition: opacity 0.2s ease-in-out;
}

user-list-item[style*="display: none"] {
   opacity: 0;
}