/* style.css - green/red/black theme */
:root{
  --green: #1FA65A;
  --green-dark: #0F8A3B;
  --red: #E03E3E;
  --black: #0B0B0B;
  --soft: #F4F6F7;
  --muted: #777;
  --max-width: 1100px;
}

*{box-sizing:border-box;font-family:Inter, system-ui, "Segoe UI", Roboto, Arial, sans-serif;}
body{
  margin:0;
  background:var(--soft);
  color:var(--black);
  -webkit-font-smoothing:antialiased;
}

/* header */
.header{
  background:#fff;
  border-bottom:4px solid var(--green-dark);
  padding:12px 20px;
  display:flex;
  align-items:center;
  gap:12px;
}
.header .brand{font-weight:700;font-size:20px;}

/* container */
.container{max-width:var(--max-width);margin:20px auto;padding:0 20px;}

/* layout */
.layout{display:flex;gap:20px;}
.sidebar{
  width:240px;
  background:#fff;
  border-radius:10px;
  padding:14px;
  border:1px solid #e9ecef;
  min-height:60vh;
}
.main{
  flex:1;
  background:#fff;
  border-radius:10px;
  padding:18px;
  border:1px solid #e9ecef;
}

/* tables */
.table{width:100%;border-collapse:collapse;margin-bottom:20px;}
.table th, .table td{padding:10px;border-bottom:1px solid #eee;text-align:left;vertical-align:middle;}
.table thead th{background:#fafafa;color:var(--muted);font-size:13px;}
.table img.avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,0.06);}

/* buttons */
.btn{display:inline-block;padding:8px 12px;border-radius:8px;text-decoration:none;border:0;cursor:pointer;transition:all 0.2s;}
.btn-primary{background:var(--green);color:#fff;}
.btn-primary:hover{background:var(--green-dark);}
.btn-danger{background:var(--red);color:#fff;}
.btn-ghost{background:transparent;border:1px solid #ddd;color:var(--black);}
.btn-ghost:hover{background:#f0f0f0;}

/* top actions */
.top-actions{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap;}
.top-actions select{padding:6px 10px;border-radius:6px;border:1px solid #ccc;}

/* player card */
.player-card{display:flex;gap:18px;align-items:center;}
.player-card img{width:110px;height:110px;border-radius:12px;object-fit:cover;}

/* stats badges */
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#fafafa;border:1px solid #eee;font-weight:600;}
.badge.green{color:var(--green);}
.badge.red{color:var(--red);}

/* forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;}
.form-grid label{display:block;margin-bottom:4px;color:var(--black);}
.form-grid input, .form-grid select{width:100%;padding:8px 10px;border-radius:8px;border:1px solid #ccc;}

/* alerts */
.alert{padding:10px;border-radius:8px;margin-bottom:16px;}
.alert.error{background:#fdecea;color:var(--red);}
.alert.success{background:#edf7ed;color:var(--green);}

/* footer fixed */
.site-footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  background:var(--black);
  color:#fff;
  padding:10px 18px;
  border-top:4px solid var(--green-dark);
  display:flex;
  justify-content:center;
  gap:12px;
  font-size:13px;
  align-items:center;
  z-index:9999;
}
.site-footer a{color:#fff;text-decoration:underline;}

/* login page */
.login-wrapper{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  background:var(--soft);
}
.login-box{
  background:#fff;
  padding:30px;
  border-radius:12px;
  box-shadow:0 5px 20px rgba(0,0,0,0.1);
  width:100%;
  max-width:400px;
}
.login-box h2{text-align:center;margin-bottom:20px;color:var(--green-dark);}
.login-box input{width:100%;padding:10px 12px;margin-bottom:12px;border-radius:8px;border:1px solid #ccc;}
.login-box button{width:100%;padding:10px 12px;border-radius:8px;border:none;background:var(--green);color:#fff;font-weight:600;cursor:pointer;}
.login-box button:hover{background:var(--green-dark);}

/* responsive */
@media (max-width:900px){
  .layout{flex-direction:column;}
  .sidebar{width:100%;}
  .form-grid{grid-template-columns:1fr;}
  .top-actions{flex-direction:column;align-items:stretch;}
}
@media (max-width:500px){
  .table img.avatar{width:36px;height:36px;}
  .player-card img{width:80px;height:80px;}
}