html {
  height: 100%;
  margin: 0;
}

.body {
  margin: 0;
  height: 100%;
}


.content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-header {
  margin-left: 2em;
  align-self: flex-start;
  margin-bottom: 1em;
}

hr {
  width: 100%;
}

.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

.input {
  justify-self: center;
}

.input--money {
  width: 60%;
}

.text {
  margin: 0px;
}

.text--interactive:hover {
  cursor: pointer;
}

.text--page-header {
  align-self: flex-start;
  margin-left: 5%;
}

.text--timestamp {
  font-size: 0.85rem;
  color: #6c757d;
  font-style: italic;
}

.text--comment-body {
  font-size: 1rem;
  color: #333;
  font-family: Arial, sans-serif;
  line-height: 1.5;
  margin-bottom: 5px;
}

.underlinedText {
  text-decoration: underline;
  font-weight: 500;
}

.button {
  height: 2em;
  border-radius: 5px;
  border: solid 1px;
}

.button:hover {
  cursor: pointer;
  border-color: #a51e23;
}

.deleteBtn {
  border: solid 1px;
  border-radius: 5px;
  background-color: aliceblue;
}

.deleteBtn:hover {
  border: solid 1px;
  border-radius: 5px;
  border-color: red;
  cursor: pointer;
}

.deleteBtn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.req-list {
  width: 90%;
}

.req-list-headers {
  width: 90%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.req-list-headers__text {
  text-align: center;
  color: #a51e23;
}

#indexHeaderDiv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

#indexHeaderDiv > select {
  width: 20%;
}

.sectionHeader {
  align-self: flex-start;
  margin-left: 5%;
}

.index-item {
  border: solid 1px;
  border-color: black;
  text-decoration: none;
  background-color: #d1d2d4;
  border-radius: 5px;
  height: 3em;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  margin-bottom: 0.5em;
}

.index-item:hover {
  border-color: #a51e23;
}

.index-item__urgent {
  border-left: 4px solid #a51e23;
}

.index-item__text {
  margin: 0px;
  text-align: center;
  align-self: center;
  text-decoration: none;
  color: black;
}

.index-item__text-urgent {
  color: #a51e23;
  font-weight: bold;
}

.req-items-table {
  width: 95%;
}

.req-items-table__row {
  display: grid;
  grid-template-columns: .5fr repeat(10, 1fr);
}

.req-items-table__row--business-cards {
  display: grid;
  grid-template-columns: .5fr repeat(10, 1fr);
}

.req-items-table__row--header {
  background-color: #ddebf7;
  border: solid 1px;
}

.req-items-table__row--header--business-cards {
  background-color: #ddebf7;
  border: solid 1px;
}

.req-items-table__row-cell {
  border: solid 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 2em;
}

.req-items-table__text {
  margin: 0;
}

.req-items-table__text--old-price {
  color: darkgrey;
}

.req-items-table__text--new-price {
  color: darkgrey;
}

.req-items-table__text--total {
  font-weight: 600;
}

.req-items-table__text--header {
  margin: 0;
  text-align: center;
  font-weight: 500;
}

.detail-lineItemsTableRows {
  height: 100%;
}

.detail-lineItemsTableRows > p {
  margin: 0;
  text-align: center;
  align-self: center;
  justify-self: center;
  border: solid 1px;
  height: 100%;
  width: 100%;
}

/* .truncate {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
} */

.detail-third-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 1em;
  width: 95%;
}

#detail-approvalDiv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 1em;
}

#detail-approvalDiv-leftSide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#detail-approvalDiv-leftSide > table > thead {
  background-color: #ddebf7;
}

#detail-approvalDiv-leftSide > table > thead > tr > th {
  border: solid 1px;
  font-size: small;
}

#detail-approvalDiv-leftSide > table > tbody > tr > td {
  border: solid 1px;
  font-size: small;
}

#detail-approvalDiv-rightSide {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

#detail-approvalDiv-rightSide > table > thead {
  background-color: #ddebf7;
}

#detail-approvalDiv-rightSide > table > thead > tr > th {
  border: solid 1px;
  font-size: small;
}

#detail-approvalDiv-rightSide > table > tbody > tr > td {
  border: solid 1px;
  font-size: small;
}

.detail-purchasing-block {
  width: 95%;
}

#approvalsPlaceholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#purchUseOnlyDiv {
  background-color: #fce4d6;
  border: solid 1px;
  display: flex;
  justify-content: center;
  margin-top: 2em;
}

#purchUseOnlyDiv > p {
  margin: 0;
  font-weight: 500;
}

#purchasingBottomDiv {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 1em;
}

#purchasingBottomDiv > p {
  text-align: center;
}

.edit-form__row-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
}

#vendorInput {
  width: 1fr;
}


#createForm-requestHeader {
  margin-bottom: 2%;
}

#createForm-requestHeader > label {
  font-weight: 500;
  margin-right: 1%;
}

.createForm-lineItemsContainer-bodyRow > input {
  margin: 0;
  width: 100%;
}

.createForm-lineItemsContainer-bodyRow > p,
#createForm-lineItemsContainer-totalCostRow > p {
  margin: 0;
  text-align: center;
  justify-self: center;
}

.title {
  color: blue;
}

.scrollable-container {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

.note {
  align-self: flex-start;

  width: 50%;

  display: flex;
  flex-direction: column;

  margin-left: 2.5%;
  margin-top: 2.5%;

  border: solid 1px;
  padding: .5%;
}


.note--shipping {
  display: flex;
  flex-direction: column;

}

.note--input {
  margin-left: 2.5%;
  margin-top: 2%;
}

@media only screen and (max-width: 600px) {
  .section-header {
    margin-left: 1em;
  }
  
  .req-list {
    width: 100%;
  }

  .index-item {
    grid-template-columns: repeat(6, 1fr);
    width: 100%;
    justify-items: center;
    align-items: center;
  }

  .index-item__text {
    text-align: left;
    padding-left: 1em;
    font-size: small;
  }

  .req-list-headers {
    width: 100%;
    grid-template-columns: repeat(6, 1fr);
    justify-items: center;
    align-items: center;
  }

  .req-list-headers__text {
    text-align: left;
    padding-left: 1em;
    font-size: small;
  }

  .detail-third-block {
    grid-template-columns: 1fr;
  }

  .detail-lineItemsTableRows > p {
    text-align: left;
    padding-left: 1em;
  }

  .detail-purchasing-block {
    width: 100%;
  }

  #purchUseOnlyDiv {
    margin-top: 1em;
  }

  #purchasingBottomDiv {
    grid-template-columns: 1fr;
  }

  #purchasingBottomDiv > p {
    text-align: left;
    padding-left: 1em;
  }

  .edit-form__row-cell {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }

  .lineItemCell > p {
    text-align: left;
    padding-left: 1em;
  }

  .req-items-table {
    width: 100%;
    font-size: small;
  }
}




.auth-table {
  width: 60%;
  table-layout: fixed;
}
.auth-table>thead>tr>th {

  min-width: 2em;
  padding: 4px;
}
.auth-table tr td {
 padding: 4px;
}

.approvals-table {
  width: 60%;
  table-layout: fixed;
}
.approvals-table__column-header {
  min-width: 2em;
  padding: 4px;
}

.approvals-table tr td {
  width: 50%;
  min-width: 150px;
  padding: 4px;
  text-align: left;
}

.hidden {
  display: none !important;
}

.suggestion-box {
  position: absolute;
  top: calc(100% + 4px); 
  left: 0;
  width: 100%;  
  z-index: 1000;
}

.text--table-header {
  font-size: 0.9rem;
  font-weight: 600;
  color: #333;                 
  margin-bottom: 0.4rem;      
  letter-spacing: 0.3px;
}

.text--label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #333;                 
  margin-bottom: 0.4rem;      
  letter-spacing: 0.3px;
}

select.user-input,
input.user-input:is(
  [type="text"], 
  [type="date"], 
  [type="number"],
  [type="tel"],
  [type="email"],
  ) {
    /* over-ride browser */
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;

    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: block;

    /* Typography */
    font-family: inherit;
    font-size: 1rem;     
    font-weight: 400;     
    color: #4a4a4a;      
    line-height: normal;  

    /* Rendering fixes (consistency across OS/browser) */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* height */
    height: 2.2em;         
    line-height: 2.2em;
    box-sizing: border-box;

    /* box */
    padding: 0 0.75rem;
    border-radius: 6px;
    border: 1px solid #cfd4d9;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input--invalid {
    border-radius: solid 2px !important; 
    border-color: red !important;
}

.toggle-button {
    height: 2em;
    border: 2px solid #0079c2;
    border-radius: 5px;
    background-color: white;
    color: #0079c2;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    outline: none;
}

.toggle-button--selected {
    background-color: #0079c2;
    color: white;
}

.toggle-button:disabled {
    background-color: #f0f0f0; 
    color: #999;                   
    border-color: #ccc;     
    cursor: not-allowed;           
    opacity: 0.6;             
}



.delete-button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-del-gap);

  height: var(--btn-del-h);
  padding: 0 var(--btn-del-pad-x);
  box-sizing: border-box;
  border-radius: var(--btn-del-radius);

  background: var(--btn-del-bg);
  color: var(--btn-del-text);
  border: 2px solid var(--btn-del-border);

  font: inherit;
  line-height: 1;                   
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* Hover / Focus / Active */
.delete-button:hover {
  background: var(--btn-del-bg-hover);
  border-color: var(--btn-del-border-strong);
}

.delete-button:focus-visible {
  outline: none;
  border-color: var(--btn-del-fill);
  box-shadow: 0 0 0 3px var(--btn-del-focus);
}

.delete-button:active {
  background: var(--btn-del-bg-active);
  transform: translateY(0.5px);
}

.delete-button:disabled,
.delete-button[aria-disabled="true"] {
  background: var(--btn-del-disabled-bg);
  border-color: var(--btn-del-disabled-border);
  color: var(--btn-del-disabled-text);
  cursor: not-allowed;
  opacity: 0.7;
  box-shadow: none;
  transform: none;
}



.btn-add-row {
  background-color: #ffffff;
  color: #0b63a6;                
  border: 2px solid #7bb7e5;    
  border-radius: 6px;             
  /* padding: 0.45rem 0.9rem;     */
  cursor: pointer;
  font: inherit;                
  text-align: center;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  height: 2em;

}

.btn-add-row:hover {
  border-color: #5aa5e6;         
}

.btn-add-row:disabled {
  background-color: #f0f0f0;     
  color: #999999;                
  border-color: #dddddd;         
  cursor: not-allowed;
  opacity: 0.8;
}

.input-like-textarea {
  display: block;
  width: 100%;
  min-height: 6.5em;            
  padding: 0.75rem;               
  border: 1px solid #cfd4d9;
  border-radius: 6px;
  background-color: #fff;
  color: #4a4a4a;
  font: inherit;
  line-height: 1.4;              
  box-sizing: border-box;
  resize: none;                 
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}


.form-note {
  display: block;
  background: #f9fafb;             
  border-left: 3px solid #cfd4d9;    
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
  border-radius: 4px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #4a4a4a;
}


.btn-submit {
  background-color: #0079c2;         
  color: #ffffff;                    
  border: 2px solid #0079c2;         
  border-radius: 6px;                
  padding: 0.55rem 1rem;              
  cursor: pointer;
  font: inherit;                     
  font-weight: 600;                 
  line-height: 1;                    
  text-align: center;
  white-space: nowrap;
  display: inline-flex;              
  align-items: center;
  justify-content: center;
  gap: 0.5rem;                        

  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease;
}

.btn-submit:hover {
  
  border-color: #0067a5;
}

.btn-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 121, 194, 0.25);  /* accessible focus ring */
}

.btn-submit:active {
  transform: translateY(0.5px);
  filter: brightness(0.98);
}

.btn-submit:disabled,
.btn-submit[aria-disabled="true"] {
  background-color: #f0f0f0;
  color: #999999;
  border-color: #dddddd;
  cursor: not-allowed;
  opacity: 0.85;
  box-shadow: none;
  transform: none;
}

.btn-draft {
  background-color: #f0f0f0;         
  color: #4a4a4a;                    
  border: 2px solid #dddddd;         
  border-radius: 6px;                
  padding: 0.55rem 1rem;              
  cursor: pointer;
  font: inherit;                     
  font-weight: 600;                 
  line-height: 1;                    
  text-align: center;
  white-space: nowrap;
  display: inline-flex;              
  align-items: center;
  justify-content: center;
  margin-right: 1rem;                   

  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease;
}
.btn-draft:hover {
  background-color: #e0e0e0;
  border-color: #cccccc;
}

.btn-draft:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(204, 204, 204, 0.25);  /* accessible focus ring */
}

.btn-draft:active {
  transform: translateY(0.5px);
  filter: brightness(0.98);
}

.btn-draft:disabled,
.btn-draft[aria-disabled="true"] {
  background-color: #f0f0f0;
  color: #999999;
  border-color: #dddddd;
  cursor: not-allowed;
  opacity: 0.85;
  box-shadow: none;
  transform: none;
}