/* Justin Crittenden / Michael Goodwyn / Orlando Trujillo-Ortiz
   Last Modified: April 22, 2025
*/

*
{
    font-family: "Inter", sans-serif;
    box-sizing: border-box;
}

body {
    background-color: #d3d3d3;
    margin: 0;
}

header {
    background-color: #fff;
    display:flex;
    align-items: center;
    padding: 0 0.3125em; /* 5px to em */
}

.logout-link {
    flex-grow: 1;
    text-align: right;
}

@media (max-width: 40.625em){ /* 650px to em */
    header{
        flex-direction: column;
    }
    header div{
        margin-bottom: 0.9375em; /* 15px to em */
    }
    button{
        margin-top: 0.3125em; /* 5px to em */
    }
}

header * {
    padding: 0 0.3125em; /* 5px to em */
}

header p{
    font-weight: bold;
    font-size: 1.6em;
    padding-right: 0.625em; /* 10px to em */
}

header a {
    padding: 0.625em 0.9375em; /* 10px 15px to em */
    border-radius: 0.9375em; /* 15px to em */
    color: black;
}

header a:hover {
    background-color: #d3d3d3;
}

#resultsBox {
    background-color: #fff;
    height: 80%;
    margin: 1.25em 1.25em; /* 20px to em */
    border-radius: 0.3125em; /* 5px to em */
}

#resultsBox table {
    width: 100%;
    border-collapse: collapse;
}

tr {
    margin: 0.625em 0; /* 10px to em */
    position: relative;

}

.clickableRow:hover {
    cursor: pointer;
}

.clickableRow.selected {
    background-color: #989898 !important;
}

input[type="button"]:disabled, button:disabled
{
    cursor: default;
    background-color: #999999;
}

td,th {
    border: 0.0625em solid black; /* 1px to em */
}

td {
    padding-left: 0.3125em; /* 5px to em */
}

td.imgContainer {
    width: 0;
    min-width: fit-content;
    text-align: center;
}

tr img{
    max-height: 3.125em; /* 50px to em */
    /*width: auto;*/
}

tr img:hover{
    /*position: absolute;
    top: 0;
    left: 0;*/
    max-height: 9.375em; /* 150px to em */
    /*z-index: 10;*/
}

footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.25em; /* 20px to em */
    margin-bottom: 0.3125em; /* 5px to em */
}

a {
    text-decoration: none;
}

select{
    display: block;
    padding: 0.3125em; /* 5px to em */
    border-radius: 0.3125em; /* 5px to em */
    cursor: pointer;
}

#pageChanger {
    border: 0.0625em solid black; /* 1px to em */
    border-radius: 0.375em; /* 6px to em */
    display: flex;
}

#pageChanger button {
    border: none;
    cursor: pointer;
    background-color: #d3d3d3;
    padding: 0.625em 0.9375em; /* 10px 15px to em */
    border-radius: 0.3125em; /* 5px to em */
}

#pageChanger button:hover {
    background-color: #989898;
}

#reportForm {
    margin: 2.5% 10%;
    padding: 0.625em 0.9375em; /* 10px 15px to em */
    height: 25%;
    background-color: #B3B3B3;
    border-radius: 0.5em;
}

#reportForm form{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    align-content: flex-start;
    flex-wrap: wrap;
}

#reportForm form>*{
    margin-right: 0.3125em; /* 5px to em */
}

.dimHover {
    background-color: #323232;
}
.dimHover:hover {
    background-color:black;
}

.footerButton {
    padding: 0.625em 1.875em; /* 10px 30px to em */
    background-color: black;
    color: #fff;
    border-radius: 0.3125em; /* 5px to em */
    cursor: pointer;
}

/* Some slight color for expired pos */
td.expired {
    background-color: #ffcccc;
}
.selected td.expired {
    background-color: #989898;
}

.lightHover {
    background-color: white;
}

.lightHover:hover {
    background-color: #989898;
}

.lightHover:hover td.expired{
    background-color: #989898 !important;
}

#reportForm button{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    padding: 0.4375em 1.875em; /* 7px 30px to em */
    border-radius: 0.3125em; /* 5px to em */
}

#reportForm span {
    margin-left: 0.125em; /* 2px to em */
    font-size: 1.2em;
}

/*#reportForm div{
    margin-right: auto;
}*/

#reportForm img {
    height: 1.2em;
}

/* Style for login page */
.login-page
{
    background-color: #d9d9d9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625em; /* 10px to em */
    font-family: 'Inter', sans-serif;
}

.header
{
    margin: 6.25rem auto 0 auto; /* 100px to rem */
    background-color: #f5f5f5;
    padding: 0.5em;
    border-radius: 0.3125em; /* 5px to em */
    border: 0.0625em solid black; /* 1px to em */
    width: 20rem; /* 320px to em */
    height: 9.375rem; /* 150px to em */
    text-align: center;
    vertical-align: center;
    text-wrap: wrap;
    font-size: 1.5625em; /* 25px to em */
    display: flex;
    justify-content: center;
    align-items: center;

    /*min-width: 40em;*/
}

.header > h1
{
    margin: 0;
}

#login-form
{
    background-color: white;
    border-radius: 0.3125em; /* 5px to em */
    width: 20em; /* 320px to em */
    height: 75%;
    padding: 1.5em; /* 24px to em */
    display: flex;
    flex-direction: column;
    gap: 1em;
}

#user, #pass
{
    display: block;
    padding: 0.3125em; /* 5px to em */
    margin: 0.1875em; /* 3px to em */
    border-radius: 0.3125em; /* 5px to em */
    width: 100%;
}

#submit
{
    color: white;
    background-color: black;
    margin-top: 1.875em; /* 30px to em */
    padding: 0.625em; /* 10px to em */
}

/* Style for Home page and header */
#hcar-header
{
    font-size: 1.25em; /* 20px to em */
    text-wrap: nowrap;
}
.hcar-body
{
    background-color: #d9d9d9;
    font-family: 'Inter', sans-serif;
    margin: 0;
}

.home-header
{
    display: flex;
    gap: 1.5em; /* 24px to em */
    background-color: white;
    padding: 2em; /* 32px to em */
    height: 6em; /* 96px to em */
    min-width: 43.75em; /* 700px to em */
}

.header-link
{
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    padding: 0.5em; /* 8px to em */
    border-radius: 0.5em; /* 8px to em */
    color: grey;
}

.header-link:visited
{
    color: grey;
}

.header-link.active
{
    background-color: #f0f0f0;
    border-radius: 0.5em; /* 8px to em */
}

.header-link:hover
{
    color: orange;
}

#logoutLink {
    margin-left: auto;
    color: blue;
}

#logoutLink:hover {
    background: #dddddd;
}

.buttons-container
{
    display: grid;
    grid-template-areas: "quickViewButton searchButton"
                         "reportsButton ."
                         "adminButton .";
    grid-template-columns: 16em 16em;
    grid-template-rows: 6em 6em 6em;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    margin-top: 2.5em;
}

#quickViewButton { grid-area: quickViewButton; }
#searchButton { grid-area: searchButton; }
#reportsButton { grid-area: reportsButton;}
#adminButton { grid-area: adminButton; }

.home-button
{
    grid-area: homeButton;
    background-color: black;
    color: white;
    padding: 0.75em; /* 12px to em */
    width: 8em;
    height: 100%;
    border-radius: 0.5em; /* 8px to em */
    font-size: 2em;
    cursor: pointer;
}

.home-button:hover
{
    background-color: #323232
}

/* Style for search.ejs */
#searchContainer
{
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    height: 31.25em; /* 500px to em */
    margin: 1.25em auto 0 auto; /* 20px to em */
    width: 31.25em; /* 500px to em */
    background-color: #b3b3b3;
    padding: 0.625em; /* 10px to em */
    align-items: center;
    justify-items: center;
    transition: height 0.3s ease;
}

#firstNameFilter
{
    grid-area: 1 / 1 / 1 / 2;
}

#lastNameFilter
{
    grid-area: 1 / 2 / 1 / 3;
}

#programFilter
{
    grid-area: 2 / 1 / 2 / 2;
}

#birthDateFilter
{
    grid-area: 2 / 2 / 2 / 3;
}

#searchSubmitContainer
{
    margin: 1.25em auto 0 auto; /* 20px to em */
    text-align: center;
}

#searchSubmit
{
    background-color: black;
    color: white;
    padding: 0.75em; /* 12px to em */
    border-radius: 0.5em; /* 8px to em */
    width: 9.375rem; /* 150px to em */
    height: 3.3125rem; /* 53px to em */
    font-size: 1.25rem; /* 20px to em */
    cursor: pointer;
}

#searchSubmit:hover
{
    background-color: #323232;
}

#moreOptions
{
    width: auto; /* 151px to em */
    height: 2.5em; /* 40px to em */
    cursor: pointer;
    grid-area: 3 / 1 / 3 / 3;
}

#moreOptions img
{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#moreOptions:hover
{
    background-color: #989898;
}

.searchField
{
    padding: 0.75em 1em; /* 12px 16px to em */
    border-radius: 0.5em; /* 8px to em */
    border-color: transparent;
    width: 15em; /* 240px to em */
}

.hidden
{
    display: none;
}

/* When the more options button is clicked */
#searchContainer.extend
{
    height: 46.875em; /* 750px to em */
    grid-template-rows: repeat(6, 1fr);
    grid-template-columns: 1fr 1fr;
}

#moreOptions.extend
{
    grid-area: 6 / 1 / 6 / 3;
}

#sexTypeFilter
{
    grid-area: 3 / 1 / 3 / 2;
}

#pronounsFilter
{
    grid-area: 3 / 2 / 3 / 3;
}

#emailFilter
{
    grid-area: 4 / 1 / 4 / 2;
}

#phoneFilter
{
    grid-area: 4 / 2 / 4 / 3;
}

#mNameFilter
{
    grid-area: 5 / 1 / 5 / 2;
}

#posFilter
{
    grid-area: 5 / 2 / 5 / 3;
}


/* START: Stuff for the clientDetails.ejs */
/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    display: flex;
    justify-content: center;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    border: none;
    border-left: 1px black solid;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 1.1em;
    flex-grow: 1;
    max-width: 20%;
}

.tab button:first-child {
    border-left: none;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;

    min-height: 25em;
    min-width: 90%;
}

.bodyContent {
    padding: 0 1em;
    min-height: 25em;
    min-width: 52.1875em;
}

.clientIdContent {
    display: grid;
    grid-template-areas: "fName midName lName DoB"
                         "address city state zip"
                         "phone email pos photo"
                         "sex maritalStatus . photo";
    justify-content: center;
    grid-template-columns: 21% 21% 26% 30%;
    grid-template-rows: 25% 25% 25% 25%;
    min-width: 90%;
}

.cli_fName { grid-area: fName; }
.cli_midName { grid-area: midName; }
.cli_lName { grid-area: lName; }
.cli_DoB { grid-area: DoB; }
.cli_phone { grid-area: phone; }
.cli_address { grid-area: address; }
#cli_city { grid-area: city}
#cli_state { grid-area: state}
#cli_zip { grid-area: zip}
.cli_email { grid-area: email; }
.cli_sex { grid-area: sex; }
.cli_maritalStatus { grid-area: maritalStatus; }
.cli_regionalCenterID { grid-area: regionalCenterID; }
/* div for photo */
.cli_photo {
    grid-area: photo;
    overflow: hidden;
}
/* The actual photo */
#cli_photo{
    object-fit: contain;
}
.cli_pos {
    grid-area: pos;
}

.clientIdContent > div > *:not(label) {
    display: block;
    margin-top: 0.5em;
    padding: 0.3em;
    border-radius: 0.5em;
    width: 85%;
    max-width: 16em;
}

/* #DoB {
    width: 9em;
} */

/* .cli_regionalCenterID {

} */

.clientIdContent > div {
    padding-top: 0.5em;
}

.medContent {
    display: grid;
    justify-content: center;
    grid-template-areas: "p_insurance p_insurance_num p_care_provider"
                         "s_insurance s_insurance_num p_physician"
                         "pref_hospital . ."
                         "vaccinationList . medReportButtonContainer"
                         "medicationList . .";
    grid-template-columns: 33% 33% 33%;
    row-gap: 1em;
    min-width: 90%;
}

.medicationListDiv { grid-area: medicationList; }
.vaccinationListDiv { grid-area: vaccinationList; }
.p_insurance { grid-area: p_insurance; }
.p_insurance_num { grid-area: p_insurance_num; }
.s_insurance { grid-area: s_insurance; }
.s_insurance_num { grid-area: s_insurance_num; }
.p_care_provider { grid-area: p_care_provider; }
.p_physician { grid-area: p_physician; }
.pref_hospital { grid-area: pref_hospital; }
#medReportButtonContainer{
    grid-area: medReportButtonContainer;
}

.medContent > div > *:not(label, table, th, td) {
    display: block;
    margin-top: 0.5em;
    padding: 0.3em;
    border-radius: 0.5em;
    width: 85%;
    max-width: 16em;
}

.medicationList {
    border-collapse: collapse;
    margin: 0.75em;
}

.medicationList th, .medicationList td {
    border: 1px solid #ddd;
    padding: 8px;
}

.medicationList th {
    background-color: #f4f4f4;
    font-weight: bold;
    width: 100%;
}

.medicationList > tbody > tr > th > *, .medicationList > tbody > tr > td > * {
    width: 7em;
    padding: 0.5em;
    text-wrap: wrap;
}




.personalInfoContent {
    display: grid;
    grid-template-areas: "cli_likes cli_hobs cli_add_notes"
                         "cli_dislikes cli_hobs cli_add_notes"
                         "cli_goals cli_ach cli_add_notes";
    justify-content: left;
    column-gap: 6%;
    row-gap: 2%;
    padding: 0.5em 0.3em 0.5em 0.3em;
    min-width: 90%;
}

.cli_hobs { grid-area: cli_hobs; }
.cli_likes { grid-area: cli_likes; }
.cli_dislikes { grid-area: cli_dislikes; }
.cli_add_notes { grid-area: cli_add_notes; }
.cli_goals { grid-area: cli_goals; }
.cli_ach { grid-area: cli_ach; }

.personalInfoContent > div > *:not(label) {
    margin-top: 0.5em;
}

.tabContainer {
    width: 95%;
    height: 90%;
    margin: auto;
    background-color: #f5f5f5;
}

.tabcontent > input {
    width: 15em;
    height: 2em;
}

.tabcontent > select {
    width: 9em;
}

.personalInfoContent {
    display: grid;
    grid-template-columns: 30% 30% 30%;
}
.personalInfoContent > div > textarea{
    width: 90%;
    height: 80%;
    border-radius: 1em;
    border-collapse: collapse;
    padding: 0.5em;
}

.personalInfoContent > div > label {
    height: 20%;
    width: 90%;
    text-size-adjust: 75%;
}

/* support team table */
div#supportTeam.tabcontent {
    min-width: 52.1875em;
}

#supportTeam > tr {
    height: 1em;
}

.clientNameHeader {
    padding-left: 2.5%;
}

.supportTeamDiv {
    display: grid;
    justify-content: center;
    min-width: 90%;
}

.supportTeam {
    height: fit-content;
    width: 100%;
    border-collapse: collapse;
    margin: 1.25em 0;
    font-size: 1em;
    text-align: left;
}

.supportTeam th, .supportTeam td {
    border: 0.0625em solid #ddd;
    width: fit-content;
    padding: 0.5em;
}

.supportTeam th {
    background-color: #f4f4f4;
    font-weight: bold;
}

.supportTeam tr:nth-child(even) {
    background-color: #f9f9f9;
}

.supportTeam tr:hover {
    background-color: #f1f1f1;
}

.caseNotes {
    display: grid;
    grid-template-areas: "caseNoteTable caseNoteButtons"
                         "caseNoteTable .";
    grid-template-columns: 80% 20%;
    min-width: 90%;
}

.caseNoteTable { grid-area: caseNoteTable }
.caseNoteButtons {grid-area: caseNoteButtons }

.caseNoteTable {
    border-collapse: collapse;
    width: 90%;
    height: fit-content;
}

.caseNoteButtons {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.caseNoteButtons > input {
    padding: 0.625em 1.875em;
    background-color: black;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}

#dialogBox {
  border: none;
  border-radius: 12px;
  padding: 2rem;
  max-width: 90%;
  width: 400px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  text-align: center;
}

#dialogBox::backdrop {
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
}

#dialogBox p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  color: #333;
}

#dialogBox button {
  flex: 1 1 45%;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#dialog-buttons {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
}

#dialogBlack {
  background-color: black;
  color: white;
}

#dialogBlack:hover {
  background-color: #323232;
}

#dialogWhite {
  background-color: #ccc;
  color: #333;
}

#dialogWhite:hover {
  background-color: #bbb;
}

@media (max-width: 500px) {
  #dialogBox {
    width: 90%;
    padding: 1.5rem;
  }

  #dialogBox button {
    flex: 1 1 100%;
  }
}

/* END: stuff for the clientDetails.ejs */


.caseNoteContent {
    display: grid;
    grid-template-areas: "program date_of_case date_of_case ."
                         "contact_type contact_type goal_worked_on goal_worked_on"
                         "narrative progress_on_goal progress_on_goal next_steps"
                         "empl_signoff date_of_signoff . .";
    padding: 0.625em 1em;
    grid-template-columns: 33% 16.5% 16.5% 33%;
    border: 1px solid #ccc;
    border-top: none;

    min-height: 25em;
    min-width: 90%;
}

.cn_program { grid-area: program; }
.cn_date_of_case { grid-area: date_of_case; }
.cn_contact_type { grid-area: contact_type; }
.cn_goal_worked_on { grid-area: goal_worked_on; }
.cn_narrative { grid-area: narrative; }
.cn_progress_on_goal { grid-area: progress_on_goal; }
.cn_next_steps { grid-area: next_steps; }
.cn_empl_signoff { 
    grid-area: empl_signoff;
    display: flex;
    align-items: center;
    gap: 0.3rem; 
    max-width: 100%;
    flex-wrap: wrap; 
 }
 #sign_button
 {
    background-color: black;
    color: white;
    border-radius: 0.5em;
    padding: 0.5rem 1rem
 }
.cn_date_of_signoff { grid-area: date_of_signoff; }

.cn_narrative > *:not(label), .cn_progress_on_goal > *:not(label), .cn_next_steps > *:not(label) {
    height: 15em;
    width: 90%;
}

.caseNoteContent > div > *:not(label) {
    display: block;
    padding: 0.25em;
    margin: 1em 1em 1em 0;
}

.caseNoteFooter {
    min-width: 52.1875em;
    padding: 0.5em 3.7% 0.5em 3.7%;
}

/* admin.ejs CSS start */

.adminContainer {
    width: 95%;
    height: 90%;
    margin: 1em auto;
    background-color: #f5f5f5;
    padding: 0.5em;

    display: grid;
    grid-template-areas: "adminEmployeeButtons adminClientButtons adminContent";
    grid-template-columns: 11em 11em;
    gap: 1em;
}

.employee_actions {
    grid-area: adminEmployeeButtons;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
.client_actions {
    grid-area: adminClientButtons;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.assignClientFieldset, .addEmployeeFieldset, .removeEmployeeFieldset,
.addNewClientFieldset, .removeClientFieldset {
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: left;
    grid-area: adminContent;
    gap: 0.5em;
}

/* generatedReportData.ejs CSS start */
.greyBox{
    margin: 2.5% 5% 1% 5%;
    background-color: #B3B3B3;
    padding: 0 0.625em;
    border-radius: 0.5em;
}

.greyBox + * {
    justify-content: center;
}
.bigFooterButton {
    padding: 1em 5em;
    background-color: black;
    color: #fff;
    border-radius: 0.3125em;
    cursor: pointer;
    font-size: 1.2em;
}
.accountLinks {
  text-align: center;
}


/* generatedReportData.ejs CSS end */

/* medical report button css start */
/*
#medReportButtonContainer {
    display: grid;
    grid-template-columns: 10% 10% 80%;
    grid-template-rows: 33% 33% 33%;
}*/
/*
#medReportButton{
    grid-column: 3 / 4;
    grid-row: 3 / 4;
    justify-self: end;
}
*/