/* Create a container wrapper */
.container {
    max-width: 1024px;
    margin: 0 auto;
    min-width: 320px;
    padding: 0 1rem;
    box-sizing: border-box;
}

/* Apply to all major sections */
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-width: 320px;
    background-color: #fafafa;
}

header-component,
main,
footer {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    min-width: 320px;
    border: 1px solid #ccc;  
    box-sizing: border-box;
}


/* Styles for tabs */
.tab-container {
    margin-top: 10px;
    width: 100%;
    overflow-x: auto;
/*    -webkit-overflow-scrolling: touch;*/
    min-width: 320px;
    position: relative;
}

.tab-divider {
    border-bottom: 1px solid #ccc;
    width: 100%;
    margin: 0.5rem 0;
}

.tab-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 1rem;
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.5rem;
}

.tab-button {
    flex: 1 1 auto;
    padding: 10px 10px;
    /* background-color: #f0f0f0; */
    color: white;
    background-color: #144B39;  
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s;
}

.tab-button:hover {
    color: white;
    background-color: #ffe772;
    color: black;  
    font-weight: bold;
    border: 1px solid #ccc;
}

.tab-button.active {
    background-color: #FFD400;
    color: black;
    font-weight: bold;
    border-color: #ccc;
}

.tab-content {
    display: none;
    padding: 10px;
    background-color: inherit;
    border-radius: 0 0 5px 5px;
    width: 100%;
    box-sizing: border-box;
    min-width: 320px;
}

.tab-content.active {
    display: block;
}

/* Basic tab styles */
.tabs {
    display: flex;
    flex-wrap: nowrap;
    list-style-type: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #ccc;
}

.tabs li {
    flex: 0 0 auto;
}

.tabs a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    border: 1px solid transparent;
    border-bottom: none;
    background-color: #f1f1f1;
    white-space: nowrap;
}

.tabs a.active {
    background-color: #fff;
    border-color: #ccc;
    border-bottom-color: #fff;
    margin-bottom: -1px;
}

/* Responsive styles for smaller screens */
@media screen and (max-width: 500px) {
    .tabs {
        flex-wrap: wrap;
    }

    .tabs li {
        flex: 1 1 auto;
        text-align: center;
    }

    .tabs a {
        padding: 8px 8px;
        font-size: 9px;
    }
}

/*  
    ---------------------------------------------------------------------------------------------------------
    Styles for the HEADER component
    ---------------------------------------------------------------------------------------------------------
*/

header-component {
    background-color: #f0f0f0;
    display: block;
    width: 100%;
    min-width: 320px;
}

/* ... other styles ... */

/*  
    ---------------------------------------------------------------------------------------------------------
    Styles for the MAIN body
    ---------------------------------------------------------------------------------------------------------
*/

main {
    padding: 1rem;
    min-width: 320px;
}

footer {
    color: white;
    background-color: #144B39;  
    padding: 1rem;
    text-align: center;
    min-width: 320px;
}


/* New form group styles */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: inherit;
}

.form-group input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: inherit;
}

/* New full-width input styles */
.full-width-input {
    width: 100%;
    margin-bottom: 15px;
}

.full-width-input label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: inherit;
}

.full-width-input input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: inherit;
    /* Remove any font-size declaration here if present */
}

/* Add these styles after the existing .full-width-input input {...} block */

/* Standard syntax */
.full-width-input input::placeholder {
    color: #999;
    opacity: 0.8;
    font-style: italic;
}

/* WebKit browsers (Chrome, Safari, Opera) */
.full-width-input input::-webkit-input-placeholder {
    color: #999;
    opacity: 0.8;
    font-style: italic;
}

/* Firefox */
.full-width-input input::-moz-placeholder {
    color: #999;
    opacity: 0.8;
    font-style: italic;
}

/* Internet Explorer 10+ */
.full-width-input input:-ms-input-placeholder {
    color: #999;
    opacity: 0.8;
    font-style: italic;
}

/* Edge */
.full-width-input input::-ms-input-placeholder {
    color: #999;
    opacity: 0.8;
    font-style: italic;
}

/* Add these styles for textareas in full-width-input */
.full-width-input textarea::placeholder {
    color: #999;
    opacity: 0.8;
    font-style: italic;
}

/* WebKit browsers (Chrome, Safari, Opera) */
.full-width-input textarea::-webkit-input-placeholder {
    color: #999;
    opacity: 0.8;
    font-style: italic;
}

/* Firefox */
.full-width-input textarea::-moz-placeholder {
    color: #999;
    opacity: 0.8;
    font-style: italic;
}

/* Internet Explorer 10+ */
.full-width-input textarea:-ms-input-placeholder {
    color: #999;
    opacity: 0.8;
    font-style: italic;
}

/* Edge */
.full-width-input textarea::-ms-input-placeholder {
    color: #999;
    opacity: 0.8;
    font-style: italic;
}

/* Question Comments input styles */
.full-width-comments {
    width: 100%;
    margin-bottom: 15px;
}

.full-width-comments label {
    display: block;
    margin-bottom: 5px;
    font-weight: normal;
    font-size: inherit;
}

.full-width-comments textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: inherit;
    min-height: 60px;
    resize: vertical;
}

.full-width-comments textarea::placeholder {
    color: #999;  /* Light gray color */
    opacity: 0.8; /* Makes it slightly transparent */
    font-style: italic;
}

/* For cross-browser compatibility */
.full-width-comments textarea::-webkit-input-placeholder { /* Chrome/Safari/Opera */
    color: #999;
    opacity: 0.8;
    font-style: italic;
}
.full-width-comments textarea::-moz-placeholder { /* Firefox */
    color: #999;
    opacity: 0.8;
    font-style: italic;
}


/* Ensure the tab content uses full width */
.tab-content {
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
}

/* Add this to ensure flex layout doesn't interfere */
.tab-content > * {
    max-width: 100%;
}

#TherapistName,
#ClientReference,
#assessment-date,
#AssessType,
#AssessLoc,
#ClientAge,
#ClientGender
 {
    font-size: inherit; /* This will inherit the font size from the parent element */
}

/* Set a base font size for the entire document */
html {
    font-size: 14px; /* This is typically the default in most browsers */
}

body {
    font-size: 1rem; /* This will be equivalent to 16px */
    line-height: 1.5; /* For better readability */
    font-family: Arial, sans-serif; /* Choose your preferred font family */
    margin: 0.5em 0;
    min-width: 320px; /* Minimum width for the entire page */
    overflow-x: auto; /* Allow horizontal scrolling if the screen is smaller than min-width */
}

/* Ensure all form elements inherit the font size */
input,
textarea,
select,
button,
label {
    font-size: inherit;
}

/* Ensure Flatpickr calendar inherits font size */
.flatpickr-calendar {
    font-size: inherit;
}

/* Override Flatpickr's default styles */
.flatpickr-wrapper {
    position: relative;
}

.input-wrapper {
    display: flex;
    align-items: center;
}

.input-button {
    padding: 10px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-left: none;
    cursor: pointer;
}

.icon-calendar::before {
    content: "📅"; /* You can replace this with an actual icon */
}

#assessment-date {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.flatpickr-calendar {
    font-size: inherit;
}

/* Ensure the calendar icon is visible */
.flatpickr-input[readonly] {
    background-color: white;
    cursor: pointer;
}

select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    appearance: none;
    font-size: inherit !important;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: 98%;
    background-position-y: 50%;
}

select::-ms-expand {
    display: none;
}

select:focus {
    outline: none;
    border-color: #007bff;
}

.custom-select {
    position: relative;
    width: 100%;
}

.custom-select select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: 98%;
    background-position-y: 50%;
}

.custom-select select::-ms-expand {
    display: none;
}

.custom-select select:focus {
    outline: none;
    border-color: #007bff;
}

/* Style for the options */
.custom-select select option {
    padding: 8px;
}

/* Scrollbar styles for WebKit browsers */
.custom-select select::-webkit-scrollbar {
    width: 10px;
}

.custom-select select::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-select select::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

.custom-select select::-webkit-scrollbar-thumb:hover {
    background: #555;
}

input[type="number"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Optional: Remove spinner buttons from number input 
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
input[type="number"] {
    -moz-appearance: textfield;
}
*/

textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical; /* Allows vertical resizing */
    font-family: inherit; /* Ensures consistent font with other inputs */
    font-size: inherit; /* Ensures consistent font size */
    line-height: 1.5; /* Improves readability for multiple lines */
}

textarea:focus {
    outline: none;
    border-color: #007bff; /* Or whatever color you use for focus */
}

/*  
    ---------------------------------------------------------------------------------------------------------
    Styles for the QUESTIONS tables
    ---------------------------------------------------------------------------------------------------------
*/

.table-questions {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    table-layout: fixed;
}

.table-questions td {
    padding: 8px;
    vertical-align: middle;
}

/* First column (questions) */
.table-questions td:first-child {
    width: 60%;
    padding-right: 15px;
}

/* Second column (button groups) */
.table-questions td:last-child {
    width: 40%;
    text-align: right; /* Align button groups to the right on larger screens */
}

/* Ensure button groups are right-aligned on larger screens */
.table-questions button-group-component {
    display: flex;
    justify-content: flex-end; /* Right align on larger screens */
    width: 100%;
}

/* Style for category headers */
.table-questions .h3-style {
    background-color: #ddd;
    font-weight: bold;
    padding: 16px 4px;
    text-align: left;
}

/* Handle colspan cells specifically */
.table-questions td[colspan="2"] {
    text-align: left;
    padding: 16px 4px;
}

/* Ensure consistent spacing between rows */
.table-questions tr {
    border-bottom: 1px solid #fff;
    padding: 8px 0;
}

/* Remove border from last row */
.table-questions tr:last-child {
    border-bottom: none;
}

/* Styles for small screens */
@media screen and (max-width: 500px) {
    .table-questions {
        width: 100%;
        display: block;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
   
    .table-questions tbody {
        display: block;
        width: 100%;
    }

    .table-questions tr {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0;
        padding: 8px;
        box-sizing: border-box;
    }

    .table-questions td {
        display: block;
        width: 100% !important;
        padding: 4px;
        box-sizing: border-box;
    }

    /* Special handling for header rows - maintain padding */
    .table-questions .h3-style,
    .table-questions td[colspan="2"] {
        width: 100%;
        padding: 16px 4px;
        text-align: left;
    }

    /* Left align button groups on small screens */
    .table-questions button-group-component {
        display: flex;
        justify-content: flex-start;
        width: 100%;
        margin: 4px 0;
    }
}

button-group-component {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
}

button-group-component button {
    flex: 1;
}

/*  
    ---------------------------------------------------------------------------------------------------------
    Styles for the INFORMATION tables
    ---------------------------------------------------------------------------------------------------------
*/

.table-info {
    width: 100%;
    border-collapse: collapse;
}

.table-info th, .table-info td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #fff;
}

.table-info th:first-child,
.table-info td:first-child {
    width: 15%;
}

.table-info th:last-child,
.table-info td:last-child {
    width: 85%;
}

.table-info th.h3-style {
    font-size: 1.17em;  
    font-weight: bold;
    margin: 1em 0;  
    font-family: inherit;  
    color: inherit;  
}

/*  
    ---------------------------------------------------------------------------------------------------------
    Styles for the SCORES tables
    ---------------------------------------------------------------------------------------------------------
*/

.table-scores {
    width: 100%;
    border-collapse: collapse;
}

.table-scores th, .table-scores td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #fff;
}

.table-scores th:first-child,
.table-scores td:first-child {
    width: 75%;
}

.table-scores th:last-child,
.table-scores td:last-child {
    width: 25%;
    text-align: center;
}

.table-scores th.h3-style {
    padding: 12px;
    font-size: 1.17em;  
    font-weight: bold;
    margin: 1em 0;  
    font-family: inherit;  
    color: inherit;  
    background-color: #ddd; 
}

/*  
    ---------------------------------------------------------------------------------------------------------
    Style for RESET button
    ---------------------------------------------------------------------------------------------------------
*/

#resetButton,
.reset-button {
    padding: 8px 12px;
    white-space: normal; /* Allows text to wrap */
    height: auto; /* Allows button to expand with wrapped text */
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: inherit;
    float: center;
    width: 49%;
    min-height: 44px; /* Ensures minimum touch target size */
    color: rgb(0, 0, 0);
    background-color: #FFD400;
}

#resetButton:hover,
.reset-button:hover {
    background-color: #FFD400;
}

/*  
    ---------------------------------------------------------------------------------------------------------
    Style for PRINT button
    ---------------------------------------------------------------------------------------------------------
*/

#printButton,
.print-button {
    padding: 8px 12px;
    white-space: normal; /* Allows text to wrap */
    height: auto; /* Allows button to expand with wrapped text */
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: inherit;
    float: center;
    width: 49%;
    min-height: 44px; /* Ensures minimum touch target size */
    color: rgb(0, 0, 0);
    background-color: #FFD400;
}

#printButton:hover,
.print-button:hover {
    background-color: #144B39;
}

/* Media query for small screens */
@media screen and (max-width: 500px) {
    .base-button,
    #resetButton,
    .reset-button,
    #printButton,
    .print-button {
        width: 100%;
        margin-bottom: 8px;
    }
}

/* If you want to add some space above the button */
.form-group {
    margin-bottom: 15px;
}

/* Styles for very small screens up to tablets */
@media (min-width: 320px) and (max-width: 500px) {
}

/* Your existing styles for larger screens */
@media (min-width: 500px) {
}

.header-table {
    width: 100%;
    margin-bottom: 4px; /* Adjust as needed */
    table-layout: block; /* This ensures equal width columns by default */
}

.header-table td {
    vertical-align: middle;
    padding: 2px; /* Adjust as needed */
}

.header-table .left-cell {
    width: 50%; /* Adjust these percentages as needed */
    text-align: left;
}

.header-table .right-cell {
    width: 50%; /* Adjust these percentages as needed */
    text-align: left; 
}

.header-table h2 {
    margin: 0; /* Remove default margin to align properly */
}

.header-table h4 {
    margin: 0; /* Remove default margin to align properly */
}

.header-table p {
    margin: 0; /* Remove default margin to align properly */
    font-size: .87em;
}

.preserve-spaces {
    white-space: pre-wrap;
}

/*  
    ---------------------------------------------------------------------------------------------------------
    Contact Tab formatting
    ---------------------------------------------------------------------------------------------------------
*/

#contact-form {
    width: 100%;
    max-width: inherit;  /* or whatever maximum width you prefer */
    margin: 0 auto;
}

#contact-form div {
    margin-bottom: 1rem;
    width: 100%;
}

#contact-form label {
    display: block;
    margin-bottom: 0.5rem;
}

#contact-form input,
#contact-form textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;  /* This is crucial for proper width calculation */
}

#contact-form textarea {
    min-height: 100px;
    resize: vertical;
}

#contact-form button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#contact-form button:hover {
    background-color: #0056b3;
}

@media screen and (max-width: 500px) {
    main {
        padding: 0;
        width: 100%;
        box-sizing: border-box;
    }
}

/* Accordion Styles */
.accordion {
    margin-bottom: 1rem;
}

.accordion-button {
    width: 100%;
    padding: 1rem;
    background-color: #144B39;
    color: #fff;
    border: 1px solid #ddd;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.accordion-button:hover {
    background-color: #144B39;
    color: #fff;
}

.accordion-content {
    background-color: white;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    border: 1px solid #ddd;
    border-top: none;
    max-height: 0;
    padding: 0 1rem;
}

.accordion-button.active {
    background-color: #FFD400;
    color: #000;
}

.accordion-controls {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 0.5em;
}

.expand-all-button {
    flex-shrink: 0;
    padding: 0.5em 1em;
    background-color: #144B39;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.expand-all-button.expanded {
    background-color: #FFD400 !important;
    color: #000 !important;
}

.expand-all-button:hover {
    background-color: #144B39;
}

.accordion-controls h2 {
    margin: 0;
}

/* Add these styles to ensure proper table header layout */
.table-questions thead th {
    padding: 0.5em;
}

/* Header container */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

/* Hamburger menu */
.hamburger-menu {
    position: relative;
}

.hamburger-button {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
}

.hamburger-button:hover {
    background-color: #FFD400;
    border-radius: 4px;
}

/* Menu content */
.menu-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    padding: 0.5rem;
    z-index: 1000;
}

.menu-content.active {
    display: block;
}

/* Reset buttons in menu */
.menu-content button {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    margin: 0.25rem 0;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.menu-content button:hover {
    background-color: #FFD400;
    border-radius: 4px;
}

.menu-divider {
    border-top: 1px solid #ddd;
    margin: 0.5rem 0;
    width: 100%;
}

/* Optional: add some extra spacing around the dividers */
.menu-content button + .menu-divider {
    margin-top: 0.5rem;
}

.menu-divider + button {
    margin-top: 0.5rem;
}

/* Question container styles */
.question-container {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 4px;
}

.help-button {
    background: none;
    border: 1px solid #144B39;
    border-radius: 50%;
    color: #144B39;
    cursor: pointer;
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 4px; /* Add some space between button and text */
}

.question-text {
    display: inline;
    white-space: nowrap;
}

.help-button:hover {
    background-color: #144B39;
    color: white;
}

/* Help row styles */
.help-row {
    display: none;
    background-color: #f9f9f9;
}

.help-row.active {
    display: table-row;
}

.help-row td {
    padding: 8px;
}

.help-content {
    display: none;
    width: 100%;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.help-content.active {
    display: block;
}

.help-content-inner {
    padding: 12px;
    color: #333;
}

.help-content-inner h4 {
    margin: 0 0 8px 0;
    color: #144B39;
}

.question-text .question {
    font-weight: bold;
    display: inline; /* Keep inline */
}

.question-text .help {
    font-weight: normal;
    display: inline; /* Keep inline */
}

/* Remove any extra spacing from the template literal */
.question-text span {
    display: inline;
    white-space: normal; /* Allow text to wrap naturally */
}

.date-clickable {
    cursor: pointer;
    position: relative;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 0.375rem 0.75rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    display: flex;
    align-items: center;
}

.date-clickable:hover {
    background-color: #f8f9fa;
    border-color: #86b7fe;
}

.date-clickable:after {
    content: "📅";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.form-group {
    position: relative;
}