/**
 * Discord OAuth Sync main stylesheet
 */

.discord-oauth-login-button-container {
  margin: 15px 0;
  text-align: center;
}

.discord-oauth-login-button {
  display: inline-flex;
  align-items: center;
  background-color: #5865f2;
  color: #ffffff;
  padding: 10px 15px;
  border-radius: 4px;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.2s ease;
  border: none;
  cursor: pointer;
  font-size: 14px;
}

.discord-oauth-login-button:hover,
.discord-oauth-login-button:focus {
  background-color: #4752c4;
  color: #ffffff;
  text-decoration: none;
}

.discord-oauth-login-button:active {
  background-color: #3c45a5;
}

.discord-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><path fill="%23FFFFFF" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A98.38,98.38,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
}

/* Error message styling */
.discord-auth-error {
  color: #cc0000;
  background-color: #ffebeb;
  border-left: 4px solid #cc0000;
  padding: 10px 12px;
  margin: 10px 0;
  border-radius: 3px;
}

/* Users list column styling */
.fixed .column-discord_user {
  width: 140px;
}

.discord-id {
  color: #666;
  font-size: 0.8em;
  margin-top: 3px;
}

@media screen and (max-width: 782px) {
  .discord-oauth-login-button {
    display: inline-flex;
    width: 100%;
    justify-content: center;
  }
}