/* System light mode */
@media (prefers-color-scheme: light)
{
    :root
    {
        --row-highlight-color: greenyellow;
        --row-selected-color: #99d900;
    }
    
    #username_logo
    {
        background: url("/images/light_mode/light_user_icon.png") center center no-repeat;
        background-size: contain;
    }

    #password_logo
    {
        background: url("/images/light_mode/light_lock_icon.png") center center no-repeat;
        background-size: contain;
    }
    
    #dashboard_link
    {
        background: url("/images/light_mode/light_home_icon.png") center center no-repeat;
        background-size: contain;
    }
    
    #cases_link
    {
        background: url("/images/light_mode/light_cases_icon.png") center center no-repeat;
        background-size: contain;
    }
    
    #residents_link
    {
        background: url("/images/light_mode/light_residents_icon.png") center center no-repeat;
        background-size: contain;
    }
    
    #reports_link
    {
        background: url("/images/light_mode/light_reports_icon.png") center center no-repeat;
        background-size: contain;
    }
    
    #users_link
    {
        background: url("/images/light_mode/light_users_icon.png") center center no-repeat;
        background-size: contain;
    }
    
    #administration_link
    {
        background: url("/images/light_mode/light_administration_icon.png") center center no-repeat;
        background-size: contain;
    }
    
    #signout_link
    {
        background: url("/images/light_mode/light_signout_icon.png") center center no-repeat;
        background-size: contain;
    }
    
    #closed_case_icon
    {
        background: url("/images/light_mode/light_check_icon.png") center center no-repeat;
        background-size: contain;
        width: 64px;
    }
    
    #location_icon
    {
        background: url("/images/light_mode/light_location_icon.png") center center no-repeat;
        background-size: contain;
    }
    
    #map_icon
    {
        background: url("/images/light_mode/light_map_icon.png") center center no-repeat;
        background-size: contain;
    }
    
    #envelope_icon
    {
        background: url("/images/light_mode/light_envelope_icon.png") center center no-repeat;
        background-size: contain;
    }
    
    #data_table tbody
    {
        color: #052B52;
    }
    
    /* Alternating row colors */
    #data_table tbody tr:nth-child(odd) {
        background-color: var(--table-row-alt, #F3F7FC);
    }
    
    #data_table tbody tr:nth-child(even) {
        background-color: var(--panel-background, #C7D6E8);
    }
    
    #data_table thead th
    {
        position: sticky;
        top: 0;
        z-index: 2;
        background-color: #cd2e88;
        color: #ffffff;
    }
}

/* System dark mode */
@media (prefers-color-scheme: dark)
{
    :root
    {
        --row-highlight-color: #567F16;
        --row-selected-color: #3D5B0F;
    }
    /* Put your dark mode CSS here */
    #username_logo
    {
        background: url("/images/dark_mode/dark_user_icon.png") center center no-repeat;
        background-size: contain;
    }
    
    #password_logo
    {
        background: url("/images/dark_mode/dark_lock_icon.png") center center no-repeat;
        background-size: contain;
    }
    
    #dashboard_link
    {
        background: url("/images/dark_mode/dark_home_icon.png") center center no-repeat;
        background-size: contain;
    }
    
    #cases_link
    {
        background: url("/images/dark_mode/dark_cases_icon.png") center center no-repeat;
        background-size: contain;
    }
    
    #residents_link
    {
        background: url("/images/dark_mode/dark_residents_icon.png") center center no-repeat;
        background-size: contain;
    }
    
    #reports_link
    {
        background: url("/images/dark_mode/dark_reports_icon.png") center center no-repeat;
        background-size: contain;
    }
    
    #users_link
    {
        background: url("/images/dark_mode/dark_users_icon.png") center center no-repeat;
        background-size: contain;
    }
    
    #administration_link
    {
        background: url("/images/dark_mode/dark_administration_icon.png") center center no-repeat;
        background-size: contain;
    }
    
    #signout_link
    {
        background: url("/images/dark_mode/dark_signout_icon.png") center center no-repeat;
        background-size: contain;
    }
    
    #closed_case_icon
    {
        background: url("/images/dark_mode/dark_check_icon.png") center center no-repeat;
        background-size: contain;
    }
    
    #location_icon
    {
        background: url("/images/dark_mode/dark_location_icon.png") center center no-repeat;
        background-size: contain;
    }
    
    #map_icon
    {
        background: url("/images/dark_mode/dark_map_icon.png") center center no-repeat;
        background-size: contain;
    }
    
    #envelope_icon
    {
        background: url("/images/dark_mode/dark_envelope_icon.png") center center no-repeat;
        background-size: contain;
    }
    
    #data_table tbody
    {
        color: white;
    }
    
    /* Alternating row colors */
    #data_table tbody tr:nth-child(odd)
    {
        background-color: var(--table-row-alt, #0F2F57);
    }
    
    #data_table tbody tr:nth-child(even)
    {
        background-color: var(--panel-background, #1c2a3b);
    }
    
    #data_table thead th
    {
        position: sticky;
        top: 0;
        z-index: 2;
        background-color: #550532;
        color: #ffffff;
    }
}

#nav_container
{
    border-top: none;
    border-bottom: none;
    width: var(--nav-container-width);
}

#user_menu
{
    position: absolute;
    top: calc(100% - calc(var(--header-height) - calc(var(--top-nav-item-spacing) / 2)));
    right: 0px;
    height: calc(var(--header-height) - var(--top-nav-item-spacing));
    width: calc(var(--header-height) - var(--top-nav-item-spacing));
    border-radius: calc(var(--header-height) - var(--top-nav-item-spacing));
    margin-right: var(--top-nav-item-spacing);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 150%;
    user-select: none;
}

#user_menu_container
{
    position: absolute;
    top: calc(var(--header-height) + 1px);
    right: 0px;
    height: auto;
    width: var(--user-dropdown-width);
    z-index: 100;
}

#hamburger_menu_button.active .line1 {
    transform: translateX(-9px) translateY(6px) rotate(45deg) scaleX(1.2);
}

#hamburger_menu_button.active .line2 {
    opacity: 0;
}

#hamburger_menu_button.active .line3 {
    transform: translateX(-9px) translateY(-6.5px) rotate(-45deg) scaleX(1.2);
}

#user_profile_selector
{
    position: absolute;
    top: 21px;
    left: 20px;
    height: calc(var(--header-height) - var(--top-nav-item-spacing));
    width: calc(var(--header-height) - var(--top-nav-item-spacing));
    border-radius: calc(var(--header-height) - var(--top-nav-item-spacing));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 150%;
    user-select: none;
}

#user_profile_link
{
    height: 89px;
}

#user_profile_table
{
    height: 100%;
    width: 100%;
}

#user_profile_table td:first-child
{
    width: 81px;
}

#user_profile_table td:last-child
{
    width: auto;
}

#totals_container
{
    position: relative;
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3%;
    margin-bottom: 5px;
}

#table_controls_container
{
    position: relative;
    height: auto;
    width: 100%;
    margin-bottom: 5px;
}

#records_per_page
{
    padding: 8px 12px;
    border-radius: 4px;
}

#data_table {
    width: 100%;
    min-width: max-content;
    border-collapse: collapse;
    table-layout: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: var(--text-color, #263445);
    background-color: var(--panel-background, #ffffff);
}

/* Table header */
#data_table thead {
    background-color: #0F2F57;
    color: #ffffff;
}

#data_table th {
    padding: 11px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    border: 1px solid #24476D;
}

/* Table cells */
#data_table td {
    padding: 9px 14px;
    text-align: left;
    vertical-align: middle;
    border: 1px solid var(--table-border, #DCE3EB);
    overflow-wrap: anywhere;
}

/* Keep the table visually organized */
#data_table tbody td {
    line-height: 1.4;
}

/* Avoid excessively wide columns for long text */
#data_table td {
    max-width: 320px;
}