/* CRplots facelift v4 - loaded AFTER style_new.css, so it only overrides; delete this file to go back to the old look.
   Colour rule: black/white/grey for structure; blue ONLY for links; green/amber/red ONLY for status; Strava orange only on Strava's own logo.
   PHONES keep the original layout - only rounding and spacing tweaks apply there. The larger text and one-row banner are for screens wider than 640px. */
:root{--ink:#111;--muted:#5b6470;--line:#e2e5e9;--hover:#4a5159;--link:#0b57d0;--ok:#1a7f37;--warn:#b26a00;--bad:#c62828;--radius:5px}
.status-ok{color:var(--ok)}.status-warn{color:var(--warn)}.status-bad{color:var(--bad)}

/* ---- all screens: rounded buttons, less dead space ---- */
/* the page script force-shows every menu button; keep the Social one hidden while it has no items */
.dropdown:has(>#Social:empty){display:none!important}
.dropbtn,.button,.linkbutton,button.buttonbig{border-radius:var(--radius)}
.dropdown-content{border-radius:var(--radius);overflow:hidden}
a:hover{text-decoration:underline}
td#name{padding:0 4px;line-height:1.15}
table:has(>tbody>tr>td#name){border-spacing:0;margin:0}
#dashboard_div{margin:0;padding:0;line-height:0}
table.ChartTable{border-spacing:0;margin-top:0}
table.ChartTable td{padding:0}
form#TandaChange>table.table1{margin-bottom:0}

/* ---- wider screens only ---- */
@media (min-width:641px){
  html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{font-size:15px;line-height:1.45;color:var(--ink);background:#fff}
  p,p.training{font-size:1em;margin:8px 6px}
  h1{font-size:1.25em;margin:12px 8px;font-weight:600}
  a{color:var(--link)}
  p.graphtitle{font-size:1.3em;font-weight:600;color:var(--ink);margin:10px 8px 2px}
  .dropbtn{background:var(--ink);color:#fff;min-width:6.5em;padding:.55em .9em;font-size:.95em;font-weight:500;cursor:pointer}
  .dropdown:hover .dropbtn,.dropbtn:focus-visible{background:var(--hover)}
  .dropdown-content{background:#fff;border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.18);min-width:190px;margin-top:4px}
  .dropdown-content a{font-size:15px;padding:11px 16px;color:var(--ink);cursor:pointer;border-bottom:1px solid #f0f1f3}
  .dropdown-content a:last-child{border-bottom:0}
  .dropdown-content a:hover{background:#f3f4f6}
  .button,.linkbutton{padding:8px 14px;font-size:.95em;font-weight:500}
  .button:hover,.linkbutton:hover{background:var(--hover);color:#fff}
  select,input[type=date],input[type=text],input[type=number]{padding:6px 8px;border:1px solid #c9ced6;border-radius:var(--radius);background:#fff;font:inherit}
  button{font:inherit}
  /* compact one-row banner: buttons together on the left with room between them, logo and Strava on the right */
  table.table1#menubuttons,table.table1#menubuttons>tbody,table.table1#menubuttons>tbody>tr{display:flex;align-items:center;width:100%;box-sizing:border-box}
  table.table1#menubuttons{border-bottom:1px solid var(--line);margin-bottom:4px}
  table.table1#menubuttons>tbody>tr{gap:14px;padding:3px 8px}
  table.table1#menubuttons>tbody>tr>td{flex:none;width:auto!important;padding:0;margin:0}
  table.table1#menubuttons>tbody>tr>td:nth-last-child(2){margin-left:auto}
  table.table1#menubuttons>tbody>tr>td#donatecell{margin-left:auto;padding:0}
  table.table1#menubuttons>tbody>tr>td#donatecell+td{margin-left:0}
  table.table1#menubuttons table.menubuttons,table.table1#menubuttons table.menubuttons>tbody{display:flex;margin:0;gap:10px}
  table.table1#menubuttons table.menubuttons>tbody>tr{display:flex;gap:10px}
  table.table1#menubuttons table.menubuttons td{padding:0;border:0}
  #photo img{height:40px;width:40px}
  table.table1#menubuttons img[alt*=logo]{width:36px;height:44px}
  td#name{padding:0 8px;font-size:.9em;color:var(--muted)}
}

/* ---- phones: a little white space above/left of the photo and above the logo; the pictures shrink by the same amount, so the banner is no taller ---- */
@media (max-width:640px){
  td#photo{padding:5px 0 0 5px}
  td#photo img,td#photo div{width:54px!important;height:54px!important}
  table.table1#menubuttons img[alt*=logo]{width:41px!important;height:50px!important;margin-top:5px}
}