/*Global*/

:root { --navy: #20415F; --green: #004225; --sky: #87CEEB; --tan: #D2B48C; --white: #FAFAFA; --lightgrey: #F2f2f2; --darkgrey: #363737; --red: #B22222; --black: #0A0A0A; --gold: #D4A017; --purple: #6A0DAD; --orange: #E67E22; --teal: #008080; }

* { box-sizing: border-box; }

body { font-family: 'Google Sans Flex', sans-serif; font-optical-sizing: auto; font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 0, "ROND" 0; font-size: 18px; background: var(--navy); margin: 0; color: var(--navy); line-height: 1.6; }

/* Structures Defaults */
h1, h2, h3, h4 { color: var(--white); font-size: 2.5rem; text-align: center; margin: 0 auto; }
h2 { font-size: 2rem; margin-bottom: 10px; margin-top: 5px; }
h3 { font-size: 1.5rem; background-color: var(--green); border: 2px solid var(--green); border-radius: 10px; color: var(--tan); margin-bottom: 5px; width: 95%; max-width: 800px; box-shadow: 2px 2px var(--tan); }
h4 { font-size: 1.25rem; margin-bottom: 15px; }

/*Footer */
footer { color: var(--white); text-align: center; }

/*lineup.php */
.loggedinas { text-align: center; color: var(--white); }
.playercard .loggedinas a:link,.playercard .loggedinas a:visited{ text-decoration: none; text-align: center; color: var(--navy); }

/*leaderboard and scoreboard*/
.nameabbr { display: none; }

/*This is the white background main body field*/
.mainbody { background: white; padding: 10px; margin: 0 auto; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); max-width: 1200px; width: 95%; overflow-x: auto; }

/*This is for the posts page*/
.playercard { display: flex; align-items: center; gap: 15px; background: white; padding: 20px; margin: 0 auto 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); width: 95%; max-width: 700px; }
.photo img { width: 110px; height: 80px; border-radius: 10px; border: 2px solid var(--green); background: var(--green); }
.info { flex: 1; }
.header { display: flex; align-items: center; gap: 10px; width: 100%; }
.header h2 { margin: 0; color: var(--green); }
.score { margin-left: auto; font-size: 2rem; font-weight: bold; color: var(--red); }
.flag-icon { width:30px; height:30px; vertical-align: middle; }

.post { background: white; padding: 20px; margin: 0 auto; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); width: 50%; }
.post h2 { margin-top: 0; color: var(--green); display: inline-block; gap: 8px; }
.post label { display: inline-block; width: 80px; }

.dropdown { width: 75%; max-width:500px; margin-bottom: 5px; }

.regulartable { border-collapse: collapse; border-radius: 8px; color: var(--navy); width: 97%; max-width: 1200px; margin: 0 auto; }
.regulartable th { background-color: var(--navy); color:var(--white); border: 2px solid transparent;  }
.regulartable td { vertical-align: middle; }
.regulartable th, .regulartable td { padding: 5px 5px; vertical-align: middle; text-align: center; }
.regulartable tr:nth-child(even) { background-color: var(--lightgrey); }
.regulartable tr:nth-child(odd) { background-color: var(--white); }
.scoreline { background-color: var(--navy); color: var(--white); }

.birdie, .eagle, .bogey, .double-bogey, .triple-bogey, .other { flex: 0 0 100px; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background-color: transparent; }
.birdie { border: 1px solid var(--green); border-radius: 50px; color: var(--green); }
.eagle { border: 1px double var(--green); border-radius: 50px; color: var(--green); }
.bogey { border: 1px solid var(--red); color: var(--red); }
.double-bogey { border: 1.25px double var(--red); color: var(--red); }
.triple-bogey { border: 1px dashed var(--red); color: var(--red); }
.other { border: 1px dashed var(--red); color: var(--red); }

.statshdr { font-weight: bold; text-align: center; }
.stats { text-align: center; }

.golfer { display: flex; align-items: center; gap: 8px; text-align: left; } 
.golfer a { color: var(--navy); text-decoration: none; vertical-align: middle; }

.group1 { font-size: .75rem; background-color: var(--purple); border: 2px solid var(--purple); border-radius: 6px; color: var(--white); margin: 0 auto; padding: 1.5px 3px; width: 75%; max-width: 400px; }
.group2 { font-size: .75rem; background-color: var(--tan); border: 2px solid var(--tan); border-radius: 6px; color: var(--black); margin: 0 auto; padding: 1.5px 3px; width: 75%; max-width: 400px; }
.group3 { font-size: .75rem; background-color: var(--navy); border: 2px solid var(--navy); border-radius: 6px; color: var(--white); margin: 0 auto; padding: 1.5px 3px; width: 75%; max-width: 400px; }
.group4 { font-size: .75rem; background-color: var(--green); border: 2px solid var(--green); border-radius: 6px; color: var(--white); margin: 0 auto; padding: 1.5px 3px; width: 75%; max-width: 400px; }
.group5 { font-size: .75rem; background-color: var(--sky); border: 2px solid var(--sky); border-radius: 6px; color: var(--black); margin: 0 auto; padding: 1.5px 3px; width: 75%; max-width: 400px; }
.amateur { font-size: .75rem; background-color: var(--red); border: 2px solid var(--red); border-radius: 6px; color: var(--white); margin: 0 auto; padding: 1.5px 3px; width: 75%; max-width: 400px; }
.amateur a:link { text-decoration: none; color: var(--white); }
.amateur a:visited { text-decoration: none; color: var(--white); }
.pro { font-size: .75rem; background-color: var(--gold); border: 2px solid var(--gold); border-radius: 6px; color: var(--black); margin: 0 auto; padding: 1.5px 3px; width: 75%; max-width: 400px; }
.pro a:link { text-decoration: none; color: var(--white); }
.pro a:visited { text-decoration: none; color: var(--white); }
.owgr { font-size: .75rem; background-color: var(--black); border: 2px solid var(--black); border-radius: 6px; color: var(--white); margin: 0 auto; padding: 1.5px 3px; width: 75%; max-width: 400px; }

.date { color: gray; font-size: 0.9em; margin-bottom: 10px; }

/*Admin.php and Login.php*/
.login-card { background: var(--white); width: 97%; max-width: 800px; margin: 0 auto; margin-top: 50px; padding: 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,.15); text-align: center; }
.admin-card { background: var(--white); width: 97%; max-width: 800px; margin: 0 auto; margin-top: 50px; padding: 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,.15); text-align: center; }

.admin-card p { margin: 0; display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 10px; }
.admin-card label { text-align: right; }
.admin-card input[type="checkbox"] { width: auto; justify-self: start; }
.admin-card input[type="text"] { width:100%; max-width:500px; }
.admin-card input[type="password"] { width:100%; max-width:500px; }
.admin-card button { width:100%; max-width:500px; margin: 0 auto; }
.admin-card select { width:100%; max-width:500px; }
.admin-card table { width:100%; max-width:800px; margin: 0 auto; }

.login-card h2,.admin-card h2 { margin-top: 0; margin-bottom: 25px; color: var(--green); }
.login-card form, .admin-card form { display: flex; flex-direction: column; gap: 15px; }
.login-card input, .admin-card input { padding: 12px; border: 1px solid var(--sky); border-radius: 8px; box-sizing: border-box; }
.login-card input:focus, .admin-card input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(0,66,37,.15); }
.login-card button, .admin-card button { background: var(--green); color: white; border: none; padding: 12px; border-radius: 8px; cursor: pointer; transition: 0.2s; }
.login-card button:hover, .admin-card button:hover { border: 1px solid var(--darkgrey); box-shadow: 6px 6px 6px var(--darkgrey); } 

.login-error, .admin-error { background: #ffe5e5; color: #c62828; padding: 10px; border-radius: 8px; margin-bottom: 15px; }

/* Header */
.nav { list-style: none; margin: 0 auto; padding: 0; background-color: var(--green); border-radius: 10px; box-shadow: 3px 3px var(--tan); display: flex; align-items: center; justify-content: center; min-height: 80px; width: 95%; max-width: 1200px; }
.nav li { margin: 3px;  padding: 3px; }
.nav li a { display: block; color: var(--white); text-decoration: none; align-items: center; border-radius: 6px; padding: 3px; }
.nav li a:hover { background-color: var(--white); color: var(--green); }

@media screen and (max-width:450px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  h4 { font-size: 1rem; }
  
  .desktoponly { display: none; }
  .mobileonly {display: table-cell; }
  .nameabbr { display: block; }

  .post { width:95%; max-width: 95%; }
  .playercard {
        width: 95%;
        box-sizing: border-box;
    }

    .header h2 {
        font-size: 1.1rem;
    }
  
  .mainbody { width: 95%; }

  .regulartable { width: 100%;  max-width: 100%; }
  .regulartable th { padding: 8px 4px; }
  .regulartable td { padding: 8px 4px; }

  .lineup { width: 100%; max-width: 100%; }

  .nav { height: unset; flex-direction: column; align-items: stretch; padding: 5px 0; width: 95%; }
  .nav li { text-align: center; }
  .nav li img { margin: 0 auto 5px auto; display: block; }
  .nav li a { max-width: 100%; }
}