@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    font-family: Arial, sans-serif;
    /*background-color: rgb(22, 22, 22);  or any light color */
    background: url('data_fabric.webp') no-repeat center/cover;
    color: #f1f1f1;
    line-height: 1.2;
    padding: 20px;
}

/* .seer-nav {
  display: flex;

  width: 100%;
  border: 1px solid red;
  font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 2em !important;
} */
.navbar-title {
  font-size: 2em !important;
}

.title-link {
  text-decoration: none;
}
.title-link:visited {
  color: inherit;

}
nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

section {
  width: auto; /* Allow the section to take full width */
  height: auto;
  /*max-width: 1000px;  /*Optional: Set a max-width to prevent excessive stretching */
  margin-left: auto;
  margin-right: auto;
  background-color: #3B4259;
  padding: 20px;
  margin-top: auto;
  margin-bottom: auto;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* Hide overflow content */
}

form {
    margin: auto;
    width: auto;
    /*max-width: 500px;*/
    
}

input[type=file], select, input[type=submit] {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* makes padding included in width */
}

input[type=submit] {
    background-color: #7587BF;
    color: white;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #485373;
}

form label,
form input[type="text"],
form input[type="password"],
form input[type="submit"] {
    display: block; /* ensures that the element takes up the full width */
    /* width: 100%;  ensures that the element stretches to the full width of its parent */
    margin-bottom: 10px; /* adds space between the elements */
}

/* If you want to ensure that labels are above inputs */
form label {
    margin-bottom: 5px;
}

/* Remove any potential default browser margins or paddings */
form input[type="text"],
form input[type="password"] {
    margin: 0 0 10px 0; /* adds space only at the bottom */
    padding: 10px; /* optional for better visual spacing */
    box-sizing: border-box; /* makes padding included in width */
}


.login-form {
    /*max-width: 300px; */
    margin: auto;
    padding: 20px;
    background-color: #1f2833; /* You can change the color as needed */
    border-radius: 8px;
}

.login-form h2 {
    text-align: center;
}

.login-form p {
    text-align: center;
    font-size: 0.9em;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
}

.form-group input[type="text"],
.form-group input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.form-group input[type="checkbox"] {
    margin-right: 5px;
}

.login-button {
    width: 100%;
    padding: 10px;
    background-color: #45a29e; /* Change as needed */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}

.form-links {
    text-align: center;
    margin-top: 20px;
}

.form-links a {
    text-decoration: none;
    color: #45a29e; /* Change as needed */
    margin: 0 5px;
}

.flash {
    color: red;
}

.g-recaptcha {
    margin: auto;
}

.logo {
    margin: auto;
    max-height: 50%;
    display: flex;
    justify-content: space-between;
}
 #pge_logo {
    display: inline-block;
    margin-right: auto;
    width: 7%;
    height: 7%;
    position: relative;
    top: 17px;
 }
 #petra_logo {
    display: inline-block;
    margin-left: auto;
    width: 13%;
 }

.sor, .sor_table, .sor_id, .asset, .welcome {
  display: none ;
  
}




.unverified {
    color: red;
}

 /* Base styles for the table */
.editableTable {
    font-family: Arial, sans-serif;
    width: auto;
    max-width: 100% !important;
    border-collapse: separate;
    color: black;
    /* border: 1px solid black; */
  }
  
  /* Style for table headers */
  .editableTable thead th {
    background-color: #7a7a7a;
    color: white;
    font-weight: normal;
    padding: 8px;
    text-align: left;
    /* border-bottom: 2px solid #ddd;
    border-left: 1px solid black; Black border for the left side of each cell */
    padding: 8px;
  }
  
  /* Style for table rows */
  .editableTable tbody tr {
    /* border-bottom: 1px solid #ddd; */
    background-color: #f1f1f1;
  }
  
  /* Style for table cells */
  .editableTable tbody td {
    padding: 8px;
    white-space: nowrap;
    text-align: left;
    /* border-left: 1px solid black;
    border-bottom: 1px solid black; */
  }
  .editableTable td:first-child,
  .editableTable th:first-child {
  border-left: none;

  }

.form-container {
  position: relative;
  width: 100%; /* Allow the container to expand fully */
  max-width: 100%; /* Ensure it doesn't overflow */
  margin: 0 auto; /* Center the container */
  height: auto;
  
  padding: 5px;
  
}

/* Table container */
#table-wrapper {
  width: 100%;
  max-width: 100%; /* Constrain to container width */
  overflow-x: auto; /* Enable horizontal scrolling */
  margin-bottom: 20px; /* Space between table and buttons */
}

  #datatable_button {
    padding: 5px 10px;
    height: auto;
    background-color: #7587BF;
    width: auto;
    color: white;
    border: none;
    border-radius: 4px;
    margin-top: 10px;
    cursor: pointer;
    font-size: 13.333333px;
    display: inline;
    position: absolute;
    right: 10px;
  } 

  #datatable_button a {
    text-decoration: none;
  }

  #datatable_button a:visited {
    color: white;
  }


  #datatable_button1 {
    padding: 5px 10px;
    height: auto;
    background-color: #7587BF;
    width: auto;
    color: white;
    border: none;
    border-radius: 4px;
    margin-top: 10px;
    cursor: pointer;
    font-size: 13.333333px;
    display: inline;
    position: absolute;
    right: 10px;
  } 

  #datatable_button1 a {
    text-decoration: none;
  }

  #datatable_button1 a:visited {
    color: white;
  }

  .submitOutput {
    padding: 5px 10px;
    height: auto;
    background-color: #7587BF;
    width: auto;
    color: white;
    border: none;
    border-radius: 4px;
    margin-top: 10px;
    cursor: pointer;
    font-size: 13.333333px;
    display: inline;
    
    left: 10px;
  } 

  .submitOutput a {
    text-decoration: none;
  }

  .submitOutput a:visited {
    color: white;
  }

  /* Hover style for rows */
  .editableTable tbody tr:hover {
    background-color: #f1f1f1;
  }
  
  /* Style for the pagination control */
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 5px 10px;
    margin: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #7587BF;
    color: #f1f1f1;
    cursor: pointer;
  }
  
  /* Active page button style */
  .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: #485373;
    color: white;
    border: 1px solid #485373;
  }
  
  /* Hover styles for buttons */
  .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #e5e5e5;
  }

  .dataTables_info {
    padding: 10px;
    margin-bottom: 10px;

  }

  .submitOutput {
    margin-top: 10px;
  }
  

  .segment-text {
    color: #f1f1f1;
  }
  
 
  /* Disable the default DataTables styling 
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    display: none;
  } */

  /* Hide the DataTables length menu 
.dataTables_wrapper .dataTables_length {
    display: none;  
  } */
  
  /* Hide the DataTables filter input */
  .dataTables_wrapper .dataTables_filter {
    display: none;
  }
  
  /* Hide the DataTables information display 
  .dataTables_wrapper .dataTables_info {
    display: none;
  }*/
  
  /* Hide the DataTables pagination 
  .dataTables_wrapper .dataTables_paginate {
    display: none;
  }
  */
  
  /* Style for the 'Submit Edits' button */
  #submitEdits {
    padding: 8px 15px;
    background-color: #7587BF;
    color: white;
    border: none;
    border-radius: 4px;
    margin-top: 10px;
    cursor: pointer;
  }
  
  #submitEdits:hover {
    background-color: #485373;
  }

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
   /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 320px;
  height: auto;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}




#outputtable{ 
  border-collapse: collapse; /* Merge table borders */

  width: 100% !important; /* Ensure table takes full width */
  max-width: 100% !important;
  table-layout: auto; /* Ensure the table layout is auto */
  /* overflow-x: auto; Allow horizontal scrolling if necessary */
}

#outputtable tbody :nth-child(2) {
  border-right: 1px solid black;
}

#parametertable {

  border-collapse: collapse; /* Merge table borders */

  width: 100% !important; /* Ensure table takes full width */
  max-width: 100% !important;
  table-layout: auto; /* Ensure the table layout is auto */
  /* overflow-x: auto; Allow horizontal scrolling if necessary */
}

#outputtable td,
#outputtable th {
  white-space: nowrap; /* Prevent text wrapping to avoid unnecessary row height increase */
  text-overflow: ellipsis; /* Handle overflowed text with ellipsis */

  padding: 8px 12px; /* Add padding for better spacing */
  text-align: left; /* Align text to the left */
  border-bottom: 1px solid #ddd; /* Add a light bottom border */
  background-color: #f9f9f9 !important; /* Light grey background */
}


#parametertable td,
#parametertable th {
  white-space: nowrap; /* Prevent text wrapping to avoid unnecessary row height increase */
  text-overflow: ellipsis; /* Handle overflowed text with ellipsis */

  padding: 8px 12px; /* Add padding for better spacing */
  text-align: left; /* Align text to the left */
  border-bottom: 1px solid #ddd; /* Add a light bottom border */
  background-color: #f9f9f9 !important; /* Light grey background */
}

.main-div {
  width: 100%;
  max-width: 100%;
  /* overflow-x: auto; Enable horizontal scrolling for the entire form */
}


/* Header styling */
#outputtable thead th{
  background-color: #f9f9f9 !important; /* Light grey background */
  border-bottom: 2px solid #ddd; /* Slightly thicker bottom border for the header */
  font-weight: bold; /* Make header text bold */
}
#parametertable thead th {
  background-color: #f9f9f9 !important; /* Light grey background */
  border-bottom: 2px solid #ddd; /* Slightly thicker bottom border for the header */
  font-weight: bold; /* Make header text bold */
}

/* Row hover effect */
#outputtable tbody tr:hover {
  background-color: #f1f1f1; /* Light grey background on hover */
}
#parametertable tbody tr:hover {
  background-color: #f1f1f1; /* Light grey background on hover */
}


table.dataTable thead tr>.dtfc-fixed-left,table.dataTable thead tr>.dtfc-fixed-right { 
  z-index:1;
  
}

table.dataTable tbody tr>.dtfc-fixed-left,table.dataTable tbody tr>.dtfc-fixed-right{ 
  z-index:1;
  
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 5px 10px;
  margin: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #7587BF;
  color: #f1f1f1;
  cursor: pointer;
}

.dataTables_wrapper .DTFC_LeftHeadWrapper .dataTable thead th {
  background-color: #f9f9f9 !important; /* Match your original header background color */
  border-bottom: 2px solid #ddd !important; /* Match your original header border */
  color: black !important; /* Ensure text color matches */
  font-weight: bold; /* Maintain bold font for headers */
}
/* Adjust any other properties that need to be consistent */
.dataTables_wrapper .DTFC_LeftBodyWrapper .dataTable tbody td {
  background-color: #f1f1f1 !important; /* Match the row background color */
  border-bottom: 1px solid #ddd !important; /* Maintain consistent borders */
}



/* Ensure fixed columns maintain their borders and spacing during scroll */
.dataTables_wrapper .DTFC_LeftHeadWrapper .dataTable thead th,
.dataTables_wrapper .DTFC_LeftBodyWrapper .dataTable tbody td {
    background-color: #f9f9f9 !important; /* Match your original header background */
    border-bottom: 2px solid #ddd !important; /* Ensure borders are visible */
    border-right: 1px solid #ddd !important; /* Maintain right border */
    padding: 8px 12px; /* Ensure padding remains consistent */
    box-sizing: border-box; /* Include padding and borders in the element's total width and height */
}

.dataTables_wrapper .DTFC_LeftBodyWrapper .dataTable tbody tr {
    background-color: #f1f1f1 !important; /* Match the row background color */
}

.dataTables_wrapper .DTFC_LeftBodyWrapper {
    overflow: hidden; /* Prevent any shifting during scroll */
}

/* Ensure that the fixed header and body columns align correctly */
.dataTables_wrapper .DTFC_LeftBodyWrapper .dataTable tbody td,
.dataTables_wrapper .DTFC_LeftHeadWrapper .dataTable thead th {
    min-width: 0 !important; /* Prevent columns from collapsing */
    white-space: nowrap; /* Prevent text wrapping */
}


/* Modal styles */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.8); /* Black with more opacity */
}

.modal-content {
  background-color: #3B4259; /* Match the section background color */
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  color: #f1f1f1; /* Match the text color */
  border-radius: 8px; /* Add border radius for consistency */
}

.close {
  color: #f1f1f1; /* Match the text color */
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #7587BF; /* Match the button hover color */
  text-decoration: none;
  cursor: pointer;
}









  /* Responsive style */
  @media only screen and (max-width: 600px) {
    #editableTable {
      display: block;
      overflow-x: auto;
    }
  }
  
/* File Type Modal Styles */
#fileTypeModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

#fileTypeModal > div {
    background-color: #3B4259;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    color: #f1f1f1;
    max-width: 500px;
    width: 90%;
}

#fileTypeModal h3 {
    color: #f1f1f1;
    margin-bottom: 20px;
}

#fileTypeModal p {
    margin-bottom: 20px;
}

#fileTypeModal button {
    padding: 10px 20px;
    margin: 0 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}

#statsFileBtn, #rawFileBtn {
    background-color: #7587BF;
    color: #f1f1f1;
}

#statsFileBtn:hover, #rawFileBtn:hover {
    background-color: #485373;
}

#cancelModalBtn {
    background-color: #666;
    color: #f1f1f1;
    margin-top: 20px;
}

#cancelModalBtn:hover {
    background-color: #555;
}