/* regular definitions are for small screens, larger screens are defined elsewhere */

:root {
    --font:2vh;
    --text:#dedede;
    --subtle:#999;
    --very_subtle:#333;
    --offblack:#030303;
    
    --logo:#dedede;
    --header:#dedede;
    --header_line:#ff0;
    --accent_color:#ff0;
    --link_color:#cc3;

    --pos_color:#696;
    --neg_color:#c00;
    --null_color:#666;

    --table_border:#dedede;
    --top_row:#222;
    --bottom_row:#222;
}
* { box-sizing: border-box; }
@font-face {
    font-family: 'RuffiansMC'; /*a name to be used later*/
    src: url('./Ruffians_MC.ttf'); /*URL to font*/
}
html {
    margin:0;
    padding:0;
    font-size:var(--font);
    line-height:calc(1.25 * var(--font));
}
body {
    margin:0;
    padding:0;
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color:var(--offblack);
    color:var(--text);
    font-family: sans-serif;
    font-size: 1rem;
    line-height: 1.25rem;
    font-weight: 500;
    background-image:url("img/web_bg.png");
    background-repeat: no-repeat; 
    background-attachment: fixed;
    background-size: contain;
    background-position: top center;
    width: 100%;
}
.logo {
    font-family: 'RuffiansMC',sans-serif;
    text-transform: uppercase;
    font-size: 3rem;
    line-height: 4rem;
    color:var(--logo);
}
.tm {
    vertical-align: baseline; /* Reset to parent baseline */
    position: relative;
    bottom: 1.5rem;
    font-size: 1.5rem;
    font-family:'Arial','sans-serif';
    color:var(--subtle);
}
#main {
    background:transparent;
    min-height:100vh;
    width:100vw;
    margin:0;
    padding:0;
}
#header {
    clear:both;
    width:98vw;
    padding: 1vh 1vw;
}
a:link, a:visited {
    text-decoration:none;
    color:var(--link_color);
    display:inline;
}
a:hover {
    text-decoration-line:underline;
    text-decoration-color:var(--link_color);
    color:var(--accent_color);
}
.active {
    border-top:2px solid var(--accent_color);
    border-left:2px solid var(--accent_color);
    border-right:2px solid var(--accent_color);
    background-color:var(--accent_color);
    color:var(--offblack);
    font-weight:600;
}
.active button:hover {
    color:var(--neg_color);
}
h1 {
    display:inline;
    font-size:1.25rem;
    margin: 0 0 0 1vw;
    color:var(--header);
    vertical-align: -1rem;
}
h1::after {
    content: ""; /* Required for ::after to render */
    display: block; /* Makes the pseudo-element behave like a block-level element */
    width: 101vw; /* Or a specific width, e.g., 50% */
    height: 3px; /* The thickness of your "hr" */
    background-color: var(--header_line); /* The color of your "hr" */
    margin: 0.5rem 0 0 -1vw; /* Adjust spacing as needed */
}
h2 {
    font-size:1rem;
    line-height:1.25rem;
    padding: 0.5rem 0 0 0;
    margin: 0;
    color:var(--header);
}
h2::after {
  content: ""; /* Required for ::after to render */
  display: block; /* Makes the pseudo-element behave like a block-level element */
  width: 100%; /* Or a specific width, e.g., 50% */
  height: 1px; /* The thickness of your "hr" */
  background-color: var(--header_line); /* The color of your "hr" */
  margin-top: .5rem; /* Adjust spacing as needed */
}
h3 { /* same as 2, but no line */
    font-size: 1.5rem;
    line-height: 1.125rem;
    padding: 0 0 0 0;
    margin: 0;    color:var(--header); 
}

input:hover {
    color:var(--accent_color);
    text-decoration-line: underline;
}

form {
    display:inline;
}
input {
    display:inline;
    text-decoration: none;
    text-decoration-color: var(--link_color);
    color:var(--link_color);
    background:transparent; 
    font-family:inherit;
}
button, .padded {
    padding:0.5rem;
    border:1px solid var(--link_color);
    color: var(--link_color);
    border-radius: 0.25rem;
    font-size:inherit; 
    background:transparent;
}
button:hover {
    color: var(--accent_color);
    text-decoration:underline;
    text-decoration-color:var(--accent_color);
}
.logintable {
    width:100vw;
    padding:1vw;
}
.logintable tr td {
    padding:0.5rem;
}
.logintable tr td:first-child{
    text-align:right;
}
.login {
    color: var(--offblack);
    padding:0.5rem;
    border:1px solid var(--link_color);
    background-color:var(--link_color);
    border-radius: 2px;
    font-size:inherit; 
    text-align:left;
    font-size:1.25rem;
}
input.username {
    font-size:1.25rem;
}
.password {
    font-size:1.25rem;
}
.warning {
    background-color:var(--neg_color); 
    padding:10px;
    display:block;
    clear:both;
}

.right {
    float:right;
    text-align:right;
}
.left {
    float:left;
    text-align:left;
}
.subtle {
    color:var(--subtle);
}
.very_subtle {
    color:var(--very_subtle);
}

.copyright {
    display:block;
    width:100%;
    background-color:var(--header);
    color:var(--offblack);
    text-align:center;
    padding-top:1rem;
    padding-bottom:1rem;
    position:fixed;
    margin:0;
    bottom:0;
    left:0;
    right:0;
}


/* small screens **************************** */    
@media screen and (max-width: 799px) {
    table * {
        font-size:calc(.8 * var(--font));
    }
    table tr td {
        padding:0;
        margin:0;
    }
    /* all financial tables - numbers smaller size too */
    .pos, .neg, .current, .null, .null:after {
        font-size:inherit;
    }

    td.deposit,
    td.withdrawal,
    td.pending,
    td.old {
        display: none;
    }
    td.net {
        display: table-cell;
    }
    
    /* file lists */
    .filelist {
        padding:1vw; 
        width:100vw;
    }
    #reportrange {
        float:right;
        clear:both;
        padding-right:1vw;
    }
    .hide_when_small{
        display: none;
        visibility: hidden;
    }
    .hide_when_large{
        display: unset;
        visibility: visible;
    }
    #dues, #earmarks, #sectools, #tretools, .filelist {
        padding: 1vw;
        width: 98vw;
        clear:both;
    }
}

/* large screens **************************** */
@media screen and (min-width: 800px) {
    td.deposit,
    td.withdrawal,
    td.pending,
    td.old {
        display: table-cell;
    }
    td.net,
    .small_screen  {
        display: none;
    }
    
    /* all financial tables - numbers regular size */
    .pos, .neg, .current, .null, .null:after {
        font-size:inherit;
    }
    #dues, #sectools, #tretools, .filelist {
        padding: 1vw;
        width: 50vw;
        float:left;
    }
    #reportrange {
        float:right;
        clear:right;
        padding-right:1vw;
    }
    .hide_when_small{
        display: unset;
        visibility: visible;
    }
    .hide_when_large{
        display: none;
        visibility: hidden;
    }

}


@media print {
    :root {
        --font:11pt;
        --text:#000;
        --subtle:#333;
        --very_subtle:#aaa;
        --offblack:#dedede;
        
        --logo:#030303;
        --header:#030303;
        --header_line:#333;
        --accent_color:#030303;
        --link_color:#030303;
    
        --pos_color:#6c6;
        --neg_color:#c33;
        --null_color:#333;
    
        --table_border:#aaa;
        --top_row:#ddd;
        --bottom_row:#ddd;
    }
    table * {
        font-size:var(--font);
    }
    table tr td {
        padding:0 2px;
    }
    .noprint, .noprint *, .addcontact, .navi_box,
    input[type="date"]::-webkit-calendar-picker-indicator,
    .add, .edit, .delete, .cancel,
    .charter_roster::after,
    .navi_box {
        height:0;
        padding:0;
        margin:0;
        display: none !important;
        visibility: hidden;
    }
    .inlinedatepicker {margin:0; padding:0;}
    html {
        font-size:var(--font);
        font-weight: 500;
    }
    
    body {
        background-color:#fff;
        color:var(--text);
        font-family: sans-serif;
        font-weight: 500;
        background-image:url("img/print_bg.png") !important;
        -webkit-print-color-adjust: exact; /* For Chrome and Safari */
        print-color-adjust: exact;
        background-repeat: no-repeat; 
        background-attachment: fixed;
        background-size: contain;
        background-position: right bottom;
    }
    .category tr td, .accounts tr td, 
    .earmarks tr td, .dues tr td {
        padding: .125em .5em;
    }
    #header {
        padding:0;
        margin:0;
    }
    .logo {
        font-size: 2rem;
        line-height: 2rem;
        padding:0;
        margin:0;
    }
    .tm {
        padding:0;
        margin:0;
        bottom: 0.5rem;
        font-size: 1rem;
        font-family:'Arial','sans-serif';
    }
    h1{
        padding:0;
        margin:0;
    }
    details {
        display: block !important; /* Forces the details element to be displayed */
    }
    summary {
        display: none !important; /* Hides the summary to show all content */
    }
    details[open] > *:not(summary) {
        display: block !important; /* Ensures the detailed content is shown */
    }
  
    .force-page-break {
        page-break-after:always;
    }
    .roster_item{
        margin-top:0.5rem;
        border-top:2px solid var(--very_subtle);
    }
    
    .roster_item_part{
        float:left;
        margin: 0 0.5rem 0 0;
    }
    
    .roster_item div:nth-child(1),
    .roster_item div:nth-child(2),
    .roster_item div:nth-child(3){
        width:31%;
    }
    .roster_item div:nth-child(4){
        visibility:hidden; 
        display:none;
    }
        td.deposit,
    td.withdrawal,
    td.pending,
    td.old {
        display: table-cell;
    }
    td.net {
        display: none;
    }
    
    /* all financial tables - numbers regular size */
    .pos, .neg, .current, .null, .null:after {
        font-size:var(--font);
    }
    #dues, #sectools, #tretools, .filelist {
        padding: 0.5vw;
        width: 50vw;
        float:left;
    }
    #accounts, #earmarks, #category {
        padding:0;
    }
    .hide_when_small{
        display: unset;
        visibility: visible;
    }
    .hide_when_large{
        display: none;
        visibility: hidden;
    }
}