/* styles.css */

* {
  font-family:verdana,sans-serif;
  font-size  :13pt;
}

body {
  /*width     :700px;*/
  margin    :20px auto;
  background:#fddede;
  border    :1px solid rgb(134, 122, 122);
}

html {
  background:#fff
}

img {
  border            :1px solid black;
  margin-right      :15px;
  -moz-box-shadow   :2px 2px 2px rgb(150, 93, 93);
  -webkit-box-shadow:2px 2px 2px rgb(150, 93, 93);
  box-shadow        :2px 2px 2px rgb(150, 93, 93);
}

.username {
  text-align :center;
  background :#eb8;
  color      :#40d;
  font-family:helvetica;
  font-size  :20pt;
  padding    :4px;
}

.headerpage {
  background :#eb8;
}

.info {
  font-style :italic;
  margin     :40px 0px;
  text-align :center;
}

.headhead {
  background :#e9cfcf;
}

.center {
  text-align:center;
}

.subhead {
  font-weight:bold;
}

.taken, .error {
  color:red;
}

.available {
  color:green;
}

.whisper {
  font-style:italic;
  color     :#006600;
}

#logo {
  font-family:Georgia;
  font-weight:bold;
  font-style :italic;
  font-size  :200px;
  color      :rgb(240, 0, 0);
  background-color :rgb(255, 245, 245);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /*display: inline-block;*/
  vertical-align: middle;
  padding: 10px 0;
  }

#robin {
  position          :relative;
  border            :10px;
  margin-left       :-26px;
  margin-right      :10px;
  top               :3px;
	-moz-box-shadow   :0px 0px 0px;
	-webkit-box-shadow:0px 0px 0px;
	box-shadow        :0px 0px 0px;
}

#used {
  margin-top:50px;
}

#leftThing {
  float: left;
  width: 40%;
  /*background-color: blue;*/
}

#rightThing {
  float: right;
  width: 40%;
  /*background-color: blue;*/
}

.frmSearch {border: 1px solid #a8d4b1;background-color: #c6f7d0;margin: 2px 0px;padding:40px;border-radius:4px;}

#member-list{float:left;list-style:none;margin-top:-3px;padding:0;width:190px;position: absolute;}
#member-list li{padding: 5px; background: #f0f0f0; border-bottom: #bbb9b9 1px solid;}
#member-list li:hover{background:#ece3d2;cursor: pointer;}
#search-box{padding: 0px;margin-top:-6px;margin-bottom:-6px;}

div.rex{
  vertical-align:top;
  }
  
  div.ex{
  width:34%;
  background-color:#4f443a;
  display:inline-block;
  margin: 0;
  padding: 0;
  vertical-align:top;
  }
  
  div.ex2{
  width:2%;
  display:inline-block;
  margin: 0;
  padding: 0;
  vertical-align:top;
  background-color:#4f443a;
  }
  
  
  div.ex3{
  width:63%;
  background-color:#7e8547;
  display:inline-block;
  margin: 0;
  padding: 0;
  vertical-align:top;
  }    
  
  
  
.table-wrapper {
    max-width: 100%;
    overflow-x: auto;
}

#tabledb {
    width: 95%;
    /*table-layout: fixed; */ /* This ensures that the table respects the widths you set */
}

#tabledb tbody, 
#tabledb th  {
    max-height: 80px; /* Adjust this value according to your needs */
    overflow-y: auto;
    overflow-x: hidden;
}

#tabledb td, 
#tabledb th {
    font-size: 80%;
    white-space: normal;
      /*max-width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      overflow-x: auto;*/
}

#popup {
  display: none;
  border: 1px solid black;
  padding: 15px;
  position: absolute;
  top: 30px;
  left: 30px;
}


.table-bordered th, .table-bordered td {
  border: 1px solid #800000;
}


.readonly-input {
    background-color: #e9ecef;
    color: #9ea7af;
}

select {
    padding-left: 10px;
    text-align: left;
    text-align-last: left; 
    direction: rtl; /* This will move the dropdown arrow to the left */

}

.table-dark-bg {
    background-color: #fff2f1; /* Dark background color */
    /*color: rgb(84, 0, 0); /* Text color */
    color: #800000;
}
.table-dark-bg th, .table-dark-bg td {
    color: #800000; /* Ensure text color is white for table headers and cells */
}
.btn.btn-darkbg {
    background-color: #fffafa; /* Match the table background color */
    color: #800000; /* White text color */
}
.btn.btn-darkbg:hover {
    background-color: #fff2f1; /* Slightly lighter color on hover */
}
.btn-darkbg2 {
  background-color: #ffcaca; /* Match the table background color */
  border-radius: 25%;
  border-color: #800000;
  border-style: solid;
  border-width: 0.11cap;
  color: #800000; /* White text color */
  padding-top: -1px;
  padding-bottom: -1px;  
  margin-top: -0.6rem; /* Reduce padding between rows */
}
.btn-darkbg2:hover {
  background-color: #ffe0e0; /* Slightly lighter color on hover */
}
.form-group-singlerecord {
    margin-bottom: -0.6rem; /* Reduce padding between rows */
    margin-top: -0.0rem; /* Reduce padding between rows */
  display: flex;
  flex-direction: row;
  align-items: center;    
}
.form-group-singlerecord label {
  flex: 1;
  display: inline-block;
  align-items: center;
}
.form-group-singlerecord .div-singlerecord {
  flex: 4.5;
  display: inline-block;
  align-items: center;
}

.form-group-singlerecord input[type="checkbox"] {
  flex: 0.1; /* Adjust as needed */
  margin-left: 0.5rem; /* Add spacing between checkbox and label */
}
.form-control-singlerecord[type="text"],
.form-control-singlerecord[type="date"],
.form-control-singlerecord[type="time"],
.form-control-singlerecord[type="datetime-local"] {
  width: 230px; /* Set your desired width */
}

.col-form-singlerecord-label {
  margin-top: 0.0rem !important;
  background-color: #fff2f1; /* Dark background color */
  /*color: rgb(84, 0, 0); /* Text color */
  color: #800000;
}
.col-form-singlerecord-label-nobk {
  margin-top: 0.0rem !important;
  background-color: transparent; /* Dark background color */
  border: transparent;
  /*color: rgb(84, 0, 0); /* Text color */
  color: #800000;
}
.div-singlerecord {
    background-color: #fff2f1; /* or 'transparent' */
    color: #800000;
}
.form-control-singlerecord {
    margin-top: -0.0rem; /* Adjust vertical alignment of labels */
    /*background-color: #fff2f1; /* Dark background color */
    /*color: rgb(84, 0, 0); /* Text color */
    color: #800000;
}
#data-form-singlerecord {
    border: 2px solid #ced4da; /* Add border to form */
    padding: 1rem; /* Add padding inside form */
    border-radius: 1.0rem; /* Optional: Add rounded corners to form */
}
.form-singlerecord-container {
    padding: 1rem; /* Add padding outside form */
}

select.form-control-singlerecord {
    background-color: #fff2f1 !important; 
    color: #800000 !important;
    text-align-last: left;
    direction: ltr;     
    /*border: none !important;*/
}
.parent-selector {
    background-color: transparent; /* or any other color */
}
/* For INPUT elements */
input.form-control-singlerecord {
    background-color: #fff2f1 !important;
    color: #800000 !important;
}

.small-font {
  font-size: 10px;
}
.med-font {
  font-size: 12px;
}

.do-align-right {
    text-align: right;
    padding-right: 20px;
}
.btn-smallpads  {
  padding-top: 0px;
  padding-bottom: 0px;
}

.tr-highlight {
  background-color: yellow;
}

.user-isme {
  color: rgb(25, 0, 255);
  font-weight: bold;
}

.user-isproposal {
  color: rgb(255, 27, 0);
  font-weight: bold;
}

.user-ischangerequest {
  color: rgb(200, 65, 40);
  font-weight: bold;
}

/* SanobObject CSS 20250721 */

/* For Fixed Header Table and Horizontal Scroll */
.table-scroll-container {
    overflow-x: auto; /* Enables horizontal scrolling if content overflows */
    overflow-y: auto; /* Enables vertical scrolling if content overflows */
    max-height: 70vh; /* Adjust this height as needed (e.g., 500px, 60vh). This creates the vertical scroll within the container. */
    border: 1px solid #dee2e6; /* Optional: adds a border around the scrollable area */
    margin-bottom: 1rem; /* Space below the table */
}

.table-scroll-container table {
    width: 100%; /* Ensures the table itself can grow to its content width */
    min-width: fit-content; /* Helps ensure content doesn't wrap unnecessarily */
    border-collapse: collapse; /* For clean table borders */
}

/* Make table header sticky */
.table-scroll-container thead th {
    position: sticky;
    top: 0; /* Sticks to the top of its scrolling container */
    background-color: #f8f9fa; /* Light background for the header - adjust to your theme */
    color: #495057; /* Text color for header */
    z-index: 10; /* Keeps header above table body content when scrolling */
    white-space: nowrap; /* Prevents text wrapping in headers */
    padding: 0.75rem 1rem; /* Adjust padding as needed */
    border-bottom: 2px solid #dee2e6; /* Separator line below header */
    text-align: left; /* Align text to left */
}

/* Optional: Add some styling for table cells if not already present */
.table-scroll-container tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e9ecef;
    white-space: nowrap; /* Prevents text wrapping in cells, forcing horizontal scroll */
}

/* Custom Dark Red Table Theme */
/* start */
/* --- Custom Dark Red Table Theme Fixes --- */
/* Custom Dark Red Table Theme */
/* start */
/* 1. Override the generic TH background & Sticky Behavior */
.table-custom-red thead th {
    background-color: #8B0000 !important; /* Force Red on the cell itself */
    color: white !important;
    border-color: #8B0000;
    border-bottom: 2px solid #600000;
    
    /* --- MISSING PART: Essential for Sticky Header --- */
    position: sticky;
    top: 0;
    z-index: 10; /* Keeps header on top of content */
    /* ----------------------------------------------- */
}

/* 2. Ensure links inside the header are white */
.table-custom-red thead th a {
    color: #ffffff !important;
    text-decoration: none;
    display: block;
    width: 100%;
}

/* 3. Hover effect for links */
.table-custom-red thead th a:hover {
    color: #ffcccc !important;
    text-decoration: underline;
}

/* 4. Borders for the table body */
.table-custom-red,
.table-custom-red td,
.table-custom-red th {
    border-color: #8B0000;
}

/* 5. Row Highlighting */
.table-custom-red tbody tr.highlighted-row {
    background-color: #ffe0b2 !important;
}

.table-custom-red tbody tr:hover {
    background-color: rgba(139, 0, 0, 0.1);
}

/* Custom Dark Red Table Theme */
/* end */


/* Toast Notification Styling */
#toast-alert {
  position: fixed; /* Stay in place even when scrolling */
  bottom: 20px;     /* Position at the bottom */
  left: 50%;        /* Center horizontally */
  transform: translateX(-50%); /* Fine-tune horizontal centering */
  padding: 16px 24px;
  background-color: #3b3939;
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  font-family: sans-serif;
  font-size: 16px;
  
  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  
  /* Smooth transition for fade-in and fade-out */
  transition: opacity 0.5s, visibility 0.5s, transform 0.5s;
  
  cursor: pointer; /* Indicates it's clickable */
  z-index: 9999;   /* Ensure it's on top of other content */
}

/* Class to make the toast visible */
#toast-alert.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-450px); /* Slide up effect */
}